pagingbulletedlistbehavior.js

AJAX 应用 实现页面的无刷新

    
    dispose : function() {
        /// <summary>
        /// Dispose the behavior
        /// </summary>
        this._deleteTabIndexAndTabValue();
        delete this._tabValueObject;
        AjaxControlToolkit.PagingBulletedListBehavior.callBaseMethod(this, 'dispose');
    },

    _removeChilds : function(eChilds) {
        /// <summary>
        /// Remove the children from their parent
        /// </summary>
        /// <param name="eChilds" type="Array" elementType="Sys.UI.DomElement" elementDomElement="true">
        /// Children to remove
        /// </param>
        for(var i = 0; eChilds.length; i++) {
            eChilds[0].parentNode.removeChild(eChilds[0]);
        }
    },
    
    _renderHtml : function(index) {
        /// <summary>
        /// Display the elements for the given index
        /// </summary>
        /// <param name="index" type="Number" integer="true">
        /// Index
        /// </param>

        var e = this.get_element();
        
        this._removeChilds(e.childNodes);
        for(var i = 0; i<this._tabValue[index].length; i++) {
            e.appendChild(this._tabValue[index][i]);
        }
        //Position scroll to top
        this._divContentUl.scrollTop = 0;
    },
    
    _selectIndex : function(index) {
        /// <summary>
        /// Select the first index
        /// </summary>

        //Add Style Select to first Index
	    if (this._tabIndex.length > 0) {
	        Sys.UI.DomElement.removeCssClass(this._tabIndex[index], this._unselectIndexCssClassValue);
            Sys.UI.DomElement.addCssClass(this._tabIndex[index], this._selectIndexCssClassValue);
            //Save previous Select Index
            this._prevIndexSelected = this._tabIndex[index];
            
            //Invoke IndexChange
            this.raiseIndexChanged(this._tabIndex[index]);
        }
    },
    
    _onIndexClick : function(evt) {
        /// <summary>
        /// Handle click events raised when the index is changed
        /// </summary>
        /// <param name="evt" type="Sys.UI.DomEvent">
        /// Event info
        /// </param>

        var e = this.get_element();        
        // Get the control that raised the event
        var aIndex = evt.target;
        
        //Change Style for selected index
        Sys.UI.DomElement.removeCssClass(this._prevIndexSelected, this._selectIndexCssClassValue);
        Sys.UI.DomElement.addCssClass(this._prevIndexSelected, this._unselectIndexCssClassValue);
        Sys.UI.DomElement.removeCssClass(aIndex, this._unselectIndexCssClassValue);
        Sys.UI.DomElement.addCssClass(aIndex, this._selectIndexCssClassValue);
        //Save previous index selected
        this._prevIndexSelected = aIndex;

        //Clear
        this._renderHtml(aIndex.tag);
        
        //Invoke IndexChange
        this.raiseIndexChanged(aIndex);
            
        evt.preventDefault();
    },

    add_indexChanged : function(handler) {
        /// <summary>
        /// Add a handler to the indexChanged event
        /// </summary>
        /// <param name="handler" type="Function">
        /// Handler
        /// </param>
        this.get_events().addHandler('indexChanged', handler);
    },
    remove_indexChanged : function(handler) {
        /// <summary>
        /// Remove a handler from the indexChanged event
        /// </summary>
        /// <param name="handler" type="Function">
        /// Handler
        /// </param>
        this.get_events().removeHandler('indexChanged', handler);
    },
    raiseIndexChanged : function(eventArgs) {
        /// <summary>
        /// Raise the indexChanged event
        /// </summary>
        /// <param name="eventArgs" type="Sys.EventArgs">
        /// Event Arguments
        /// </param>
        
        // Update the selected index        
        this._indexSelected = eventArgs.tag;
        
        var handler = this.get_events().getHandler('indexChanged');
        if (handler) {
            if (!eventArgs) {
                eventArgs = Sys.EventArgs.Empty;
            }
            handler(this, eventArgs);
        }
        this.set_ClientState(eventArgs.tag+";"+this.get_IndexSize()+";"+this.get_MaxItemPerPage()+";"+this.get_ClientSort());
    },
    
    get_tabIndex : function() {
        /// <value type="Array" elementType="Sys.UI.DomElement" elementDomElement="true">
        /// DOM elements of the indices
        /// </value>
        return this._tabIndex;
    },
    
    get_tabValue : function() {
        /// <value type="Array" elementType="Sys.UI.DomElement" elementDomElement="true">
        /// DOM elements of the items to display for each index
        /// </value>
        return this._tabValue;
    },

    _updateIndexAndView : function(index) {
        /// <summary>
        /// Regenerate the tables of indices and display
        /// </summary>

        //Re-Generate TabIndex and TabValue
        this._generateIndexAndTabForView()
        //Select clientState index or default select first index
        if (this._tabIndex.length > 0) {
            if (index < this._tabIndex.length) {
                this._renderHtml(this._tabIndex[index].tag);
                this._selectIndex(index);
            } else {
                this._renderHtml(this._tabIndex[0].tag);
                this._selectIndex(0);
            }
        }
    },
    
    get_Height : function() {
        /// <value type="Number" integer="true">
        /// Height of the bulleted list
        /// </value>
        return this._heightValue;
    },
    set_Height : function(value) {
        if (this._heightValue != value) {
            this._heightValue = value;
            if (this.get_isInitialized()) {
                //Change Height in the DOM
                this._changeHeightDivContent();
            }
            this.raisePropertyChanged('Height');
        }
    },
    
    get_IndexSize : function() {
        /// <value type="Number" integer="true">
        /// Number of characters in the index headings (ignored if MaxItemPerPage is set)
        /// </value>
        return this._indexSizeValue;
    },
    set_IndexSize : function(value) {
        if (this._indexSizeValue != value) {
            //Clear ClientState to set 0 index
            this.set_ClientState("0;"+value+";"+this.get_MaxItemPerPage()+";"+this.get_ClientSort());

            this._indexSizeValue = value;
            if (this.get_isInitialized()) {
                //Update TabIndex and TabValue and Select first Index
                this._updateIndexAndView(0);
            }
            this.raisePropertyChanged('IndexSize');
        }
    },
    
    get_MaxItemPerPage : function() {
        /// <value type="Number" integer="true">
        /// Maximum number of items per page (ignores the IndexSize property)
        /// </value>
        return this._maxItemPerPage;
    },
    set_MaxItemPerPage : function(value) {
        if(this._maxItemPerPage != value) {
            //Clear ClientState to set 0 index
            this.set_ClientState("0;"+this.get_IndexSize()+";"+value+";"+this.get_ClientSort());


            this._maxItemPerPage = value;
            if (this.get_isInitialized()) {
                //Update TabIndex and TabValue and Select first Index
                this._updateIndexAndView(0);
            }

            this.raisePropertyChanged('MaxItemPerPage');
        }
    },
    
    get_Separator : function() {
        /// <value type="String">
        /// Separator text to be placed between indices
        /// </value>
        return this._separatorValue;
    },
    set_Separator : function(value) {
        if (this._separatorValue != value) {
            if (value) {
                this._separatorValue = value;
            } else {
                this._separatorValue = '';
            }    
            if (this.get_isInitialized()) {
                //Update TabIndex and TabValue and Select first Index
                this._updateIndexAndView(0);
            }
            this.raisePropertyChanged('Separator');
        }
    },
    
    get_ClientSort : function() {
        /// <value type="Boolean">
        /// Whether or not the items should be sorted client-side
        /// </value>
        return this._clientSortValue;
    },
    set_ClientSort : function(value) {
        if (this._clientSortValue != value) {
            //Clear ClientState to set 0 index
            this.set_ClientState("0;"+this.get_IndexSize()+";"+this.get_MaxItemPerPage()+";"+value);


            this._clientSortValue = value;
            if (this.get_isInitialized()) {
                //if _clientSortValue sort Objects else sorton index init
                if (this._clientSortValue)
                    this._tabValueObject.sort(this.liElementSortText);
                else
                    this._tabValueObject.sort(this.liElementSortIndex);
                //Update TabIndex and TabValue and Select first Index
                this._updateIndexAndView(0);
            }    
            this.raisePropertyChanged('ClientSort');
        }
    },
    
    get_SelectIndexCssClass : function() {
        /// <value type="String">
        /// CSS class for the selected index.
        /// </value>
        return this._selectIndexCssClassValue;
    },
    set_SelectIndexCssClass : function(value) {
        if (this._selectIndexCssClassValue != value) {
            this._selectIndexCssClassValue = value;
            this.raisePropertyChanged('SelectIndexCssClass');
        }
    },
    
    get_UnselectIndexCssClass : function() {
        /// <value type="String">
        /// CSS class for indices that aren't selected
        /// </value>
        return this._unselectIndexCssClassValue;
    },
    set_UnselectIndexCssClass : function(value) {
        if (this._unselectIndexCssClassValue != value) {
            this._unselectIndexCssClassValue = value;
            this.raisePropertyChanged('UnselectIndexCssClass');
        }
    }
}
AjaxControlToolkit.PagingBulletedListBehavior.registerClass('AjaxControlToolkit.PagingBulletedListBehavior', AjaxControlToolkit.BehaviorBase);
//    getDescriptor : function() {
//        var td = AjaxControlToolkit.PagingBulletedListBehavior.callBaseMethod(this, 'getDescriptor');
//        
//        td.addProperty('Separator', String);        
//        td.addProperty('Height', Number);        
//        td.addProperty('IndexSize', String);    
//        td.addProperty('MaxItemPerPage', Number);   
//        td.addProperty('ClientSort', Boolean); 
//        td.addProperty('SelectIndexCssClass', String);
//        td.addProperty('UnselectIndexCssClass', String);
//        td.addEvent('IndexChanged', true);
//        return td;
//    },