AjaxControlToolKit环境下用UserControl（C#）模拟的自定义下拉框（下）

AjaxControlToolKit环境下用UserControl（C#）模拟的自定义下拉框（下）2011-10-18 博客园野文3、用Javascript实现的SELDropDownListBehavior部分：
javascript主要用来控制各个控件的展现和状态：
function SELDropDownListBehavior（elements） {
    // Elements
    this._globalContainer = null;
    this._headerContainer = null;
    this._headerText = null;
    this._arrowImage = null;
    this._listBox = null;
    this._selectedIndexField = null;

    // Properties
    this._arrowImageUrl = null;
    this._arrowImageHoverUrl = null;
    this._autoPostBack = true;
    this._selectedIndexChangeClientScript = null;
    this._doPostBackElementID = null;

    // CSS
    this._itemCssClass = null;
    this._itemHoverCssClass = null;
    this._itemAlternateCssClass = null;
    this._itemAlternateHoverCssClass = null;
    this._itemSelectedCssClass = null;
    this._itemSelectedHoverCssClass = null;

    // Inits
    this.initialize（elements）;
    this.measureSize（）;
    this.regEvents（）;
}

SELDropDownListBehavior.prototype = {
    initialize: function（elements） {
        // Elements
        if （this.isValid（elements.GlobalContainer））
            this._globalContainer = elements.GlobalContainer;

         if （this.isValid（elements.HeaderContainer））
            this._headerContainer = elements.HeaderContainer;

         if （this.isValid（elements.HeaderText））
            this._headerText = elements.HeaderText;

        if （this.isValid（elements.ArrowImage））
            this._arrowImage = elements.ArrowImage;

        if （this.isValid（elements.ListBox））
            this._listBox = elements.ListBox;

        if （this.isValid（elements.SelectedIndexField））
            this._selectedIndexField = elements.SelectedIndexField;

         // Properties
        if （this.isValid（elements.ArrowImageUrl））
            this._arrowImageUrl = elements.ArrowImageUrl;

        if （this.isValid（elements.ArrowImageHoverUrl））
            this._arrowImageHoverUrl = elements.ArrowImageHoverUrl;

         if （this.isValid（elements.AutoPostBack））
            this._autoPostBack = elements.AutoPostBack;

        if （this.isValid（elements.SelectedIndexChangeClientScript））
            this._selectedIndexChangeClientScript = elements.SelectedIndexChangeClientScript;

        if （this.isValid （elements.DoPostBackElementID））
            this._doPostBackElementID = elements.DoPostBackElementID;

         // CSS
        if （this.isValid（elements.ItemCssClass））
            this._itemCssClass = elements.ItemCssClass;

        if （this.isValid（elements.ItemHoverCssClass））
            this._itemHoverCssClass = elements.ItemHoverCssClass;

         if （this.isValid（elements.ItemAlternateCssClass））
            this._itemAlternateCssClass = elements.ItemAlternateCssClass;

        if （this.isValid（elements.ItemAlternateHoverCssClass））
            this._itemAlternateHoverCssClass = elements.ItemAlternateHoverCssClass;

        if （this.isValid （elements.ItemSelectedCssClass））
            this._itemSelectedCssClass = elements.ItemSelectedCssClass;

         if （this.isValid（elements.ItemSelectedHoverCssClass））
            this._itemSelectedHoverCssClass = elements.ItemSelectedHoverCssClass;
    },

    measureSize: function（） {
        var storeObjs = [];

        // save elements which will be setted to display="block" from display="none"
        var curObj = this._globalContainer;
        while （curObj ！= null） {
            if （curObj.style ！= null && curObj.style.display == "none"） {
                storeObjs[storeObjs.length++] = { "obj": curObj, "display": curObj.style.display, "visibility": curObj.style.visibility };
                curObj.style.visibility = "hidden";
                curObj.style.display = "";
            }
            curObj = curObj.parentNode;
        }

        var headerWidth = this._headerText.offsetWidth + this._arrowImage.offsetWidth;
        var headerHeight = Math.max（this._headerText.offsetHeight, this._arrowImage.offsetHeight）;

        if （this._listBox ！= null && headerWidth > 0）
            this._listBox.style.width = （headerWidth - 2） + "px";

         if （this._globalContainer ！= null && headerWidth > 0） {
            this._globalContainer.style.width = headerWidth + "px";
            this._globalContainer.style.height = headerHeight + "px";
        }

        // restore the style.display and style.visibility
        for （var i = 0; i < storeObjs.length; i++） {
            storeObjs[i].obj.style.display = storeObjs[i].display;
            storeObjs[i].obj.style.visibility = storeObjs[i].visibility;
        }
    },

    regEvents: function（） {
        // reg events of listItems
        var listItems = this.get_listItems（）;
        for （var i = 0; i < listItems.length; i++） {
            var item = listItems[i];
            $addHandler（item, "mouseover", this.getItemMouseOverHandler （item））;
            $addHandler（item, "click", this.getItemClickHandler（item））;
        }

        // reg events of header clicking
        $addHandler（this._headerText, "click", SELDropDownListBehavior.createDelegate（this, this.headerClickHandler））;
        $addHandler（this._arrowImage, "click", SELDropDownListBehavior.createDelegate（this, this.headerClickHandler））;

         // reg events of arrowImage
        $addHandler（this._arrowImage, "mouseover", SELDropDownListBehavior.createDelegate（this, this.arrowImageMouseOverHandler））;
        $addHandler（this._arrowImage, "mouseout", SELDropDownListBehavior.createDelegate（this, this.arrowImageMouseOutHandler））;

         // reg events of document.click
        $addHandler（document, "click", SELDropDownListBehavior.createDelegate（this, this.documentClickHandler））;
    },

    set_selectedIndex: function（selectedIndex） {
        if （this._selectedIndexField ！= null）
            this._selectedIndexField.value = selectedIndex;

        this._headerText.value = this.get_selectedText（）;

        if （this.isListBoxPopup（））
            this.showListBox（）;
    },

    get_listItems: function（） {
        if （this.isValid（this._listBox））
            return this._listBox.getElementsByTagName（"li"）;
        return [];
    },

    get_selectedIndex: function（） {
        if （this._selectedIndexField）
            return this._selectedIndexField.value;
        return -1;
    },

    get_listItemIndex: function（listItem） {
        var listItems = this.get_listItems（）;
        for （var i = 0; i < listItems.length; i++） {
            if （listItem == listItems[i]）
                return i;
        }
        return -1;
    },

    get_selectedListItem: function（） {
        var selectedIndex = this.get_selectedIndex（）;
        var listItems = this.get_listItems（）;
        if （selectedIndex > -1 && selectedIndex < listItems.length）
            return listItems[selectedIndex];
        return null;
    },

    get_selectedText: function（） {
        var selectedItem = this.get_selectedListItem（）;
        if （selectedItem）
            return selectedItem.innerHTML;
        return "";
    },

    isValid: function（el） {
        return （el ！= null && typeof （el） ！= "undefined" && el.toString（） ！= ""）;
    },

    hideListBox: function（） {
        if （this._listBox ！= null）
            this._listBox.style.display = "none";
    },

    showListBox: function（） {
        if （this._listBox ！= null）
            this._listBox.style.display = "block";

        this.resetAllListItemsCssClass（）;

        // Set selectedItem to MouseOver Class if no ItemSelectedCssClass was setted
        var selectedListItem = this.get_selectedListItem（）;
        if （selectedListItem && ！this._itemSelectedCssClass） {
            if （this.get_selectedIndex（） % 2 == 1 && this._itemAlternateHoverCssClass）
                selectedListItem.className = this._itemAlternateHoverCssClass;
            else
                selectedListItem.className = this._itemAlternateCssClass;
        }
    },

    isListBoxPopup: function（） {
        if （this._listBox ！= null）
            return this._listBox.style.display ！= "none";
        return false;
    },

    resetAllListItemsCssClass: function（） {
        // set class of all item/alternate items
        var listItems = this.get_listItems（）;
        var selectedIndex = this.get_selectedIndex（）;

        for （var i = 0; i < listItems.length; i++） {
            var listItem = listItems[i];
            if （i == selectedIndex && this._itemSelectedCssClass）
                listItem.className = this._itemSelectedCssClass;
            else {
                if （i % 2 == 1 && this.isValid （this._itemAlternateCssClass））
                    listItem.className = this._itemAlternateCssClass;
                else
                    listItem.className = this._itemCssClass;
            }
        }
    },

    setListItemMouseOver: function（listItem） {
        this.resetAllListItemsCssClass（）;
        var index = this.get_listItemIndex（listItem）;

        if （index == this.get_selectedIndex（） && this._itemSelectedHoverCssClass ！= null）
            listItem.className = this._itemSelectedHoverCssClass;
        else {
            if （index % 2 == 1 && this.isValid （this._itemAlternateHoverCssClass））
                listItem.className = this._itemAlternateHoverCssClass;
            else
                listItem.className = this._itemHoverCssClass;
        }
    },

    postBack: function（） {
        if （__doPostBack）
            __doPostBack（this._doPostBackElementID, ""）;
    },

    selecteListItem: function（listItem） {
        var selectedIndex = this.get_listItemIndex（listItem）;
        if （this.get_selectedIndex（） ！= selectedIndex） {
            this._selectedIndexField.value = selectedIndex;

             this.resetAllListItemsCssClass（）;
            if （this._itemSelectedHoverCssClass）
                listItem.className = this._itemSelectedHoverCssClass;

            this._headerText.value = listItem.innerHTML;

             if （this.isValid（this._selectedIndexChangeClientScript））
                eval（this._selectedIndexChangeClientScript）;

             if （this._autoPostBack）
                this.postBack（）;
            else
                this.hideListBox（）;
        }
        else
            this.hideListBox（）;
    },

    getItemMouseOverHandler: function（listItem） {
        var ddl = this;
        return function（） {
            ddl.setListItemMouseOver（listItem）;
        }
    },

    getItemClickHandler: function（listItem） {
        var ddl = this;
        return function（） {
            ddl.selecteListItem（listItem）;
        }
    },

    headerClickHandler: function（e） {
        if （this.isListBoxPopup（））
            this.hideListBox（）;
        else
            this.showListBox（）;
    },

    arrowImageMouseOverHandler: function（） {
        this._arrowImage.src = this._arrowImageHoverUrl;
    },

    arrowImageMouseOutHandler: function（） {
        this._arrowImage.src = this._arrowImageUrl;
    },

    documentClickHandler: function（e） {
        e = window.event || e;
        var srcE = e.srcElement || e.target;
        while （srcE ！= null） {
            if （srcE == this._headerContainer || srcE == this._listBox）
                return;
            else
                srcE = srcE.parentNode;
        }

        if （this.isListBoxPopup（））
            this.hideListBox（）;
    }
}

SELDropDownListBehavior.createDelegate = function（instance, method） {
    return function（） {
        return method.apply（instance, arguments）;
    }
}