AjaxControlToolkit环境下用Javascript实现简单的Dropdownlist

　　在项目中对下拉框的样式有严格的要求，传统dropdownlist右边的三角要换成一个自定义图片，且要求在ie和firefox下都能兼容（dropdownlist即html的select在firefox下边框不好处理）。所以就索性用javascript写了一个自定义的dropdownlist。虽然最后因“使用javascript过滥”而未被采用，但还是值得记录一下。

　　先看一下效果图：

　　由于项目引用了AjaxControlToolkit，所以这个代码需要在AjaxControlToolkit环境下才能正常工作。本来想全部用AjaxControlToolKit那套来模拟扩展一个控件，但对Ajax的javascript那套完整机制还没有清的认识，所以只好作罢，改用传统的方式加上些许Ajax的函数，看起来有点不伦不类。

     Javascript代码：

//==============================================================================================
// Author : 野文(Jasson Qian)
// Date   : 2009-5-9
// Descriptiont: Create the javascript dropdownlist when developing Sony project
//               which is using AjaxControlToolKit, but it wasn't be used at the end.
//               It can be worked under IE and FireFox( Tested in IE7 and FF)
//----------------------------------------------------------------------------------------------
// Usage of JsDropdownList:
//  NOTE: This function should be used under Ajax enviorment and be created after Sys.Application.add_init.
//
// 1. Definition of elements parameter:
//      elements = {    "ParentContainer":"",
//                      "GlobalCssClass":"",
//                      "HeaderTextCssClass":"",
//                      "ArrowImageCssClass":"",
//                      "ListBoxCssClass":"",
//                      "ListItemCssClass":"",
//                      "ListItemHoverCssClass":"",
//                      "ListItemAlternateCssClass":"",
//                      "ListItemAlternateHoverCssClass":"",
//                      "ListItemSelectedCssClass":"",
//                      "ListItemSelectedHoverCssClass":"",
//                      "ArrowImageUrl":"",
//                      "ArrowHoverImageUrl":"",
//                      "Items":[   
//                                {"Text":"", "Value":""},
//                                {"Text":"", "Value":""},
//                                {"Text":"", "Value":""}
//                              ],
//                       "SelectedIndex":"",
//                       "OnSelectedItemChange":""
//            }
// 2. Callback function: OnSelectedItemChange
//        function onSelectedItemChange( item, selectedIndex );
//    We can get item.Text and item.Value from parameter item.
// 3. Some methods:
//      get_selectedIndex()
//      get_selectedItem()
//      set_Items()
//===============================================================================================
function JsDropdownList(elements) {
    this._parentContainer = null;
    this._arrowImageUrl = null;
    this._arrowHoverImageUrl = null;
    this._items = [];
    this._selectedIndex = -1;
    this._onSelectedItemChange = null;

    this._globalContainerDiv = null;
    this._headerDiv = null;
    this._textBox = null;
    this._arrowImage = null;
    this._ulElement = null;
    this._listItems = [];

    // CSS Class
    this._globalCssClass = null;
    this._headerTextCssClass = null;
    this._arrowImageCasClass = null;
    this._listBoxCssClass = null;
    this._listItemCssClass = null;
    this._listItemHoverCssClass = null;
    this._listItemAlternateCssClass = null;
    this._listItemAlternateHoverCssClass = null;
    this._listItemSelectedCssClass = null;
    this._listItemSelectedHoverCssClass = null;

    this.initialize(elements);
    this.render();
}

JsDropdownList.prototype = {
    initialize: function(elements) {
        // save parameters
        if (elements.ParentContainer != null)
            this._parentContainer = elements.ParentContainer;

        if (elements.ArrowImageUrl != null)
            this._arrowImageUrl = elements.ArrowImageUrl;

        if (elements.ArrowHoverImageUrl != null)
            this._arrowHoverImageUrl = elements.ArrowHoverImageUrl;

        if (elements.Items != null)
            this._items = elements.Items;

        if (elements.SelectedIndex != null)
            this._selectedIndex = elements.SelectedIndex;

        if (elements.OnSelectedItemChange != null)
            this._onSelectedItemChange = elements.OnSelectedItemChange;

        // CSS
        if (elements.GlobalCssClass != null)
            this._globalCssClass = elements.GlobalCssClass;

        if (elements.HeaderTextCssClass != null)
            this._headerTextCssClass = elements.HeaderTextCssClass;

        if (elements.ArrowImageCssClass != null)
            this._arrowImageCssClass = elements.ArrowImageCssClass;

        if (elements.ListBoxCssClass != null)
            this._listBoxCssClass = elements.ListBoxCssClass;

        if (elements.ListItemCssClass != null)
            this._listItemCssClass = elements.ListItemCssClass;

        if (elements.ListItemHoverCssClass != null)
            this._listItemHoverCssClass = elements.ListItemHoverCssClass;

        if (elements.ListItemAlternateCssClass != null)
            this._listItemAlternateCssClass = elements.ListItemAlternateCssClass;

        if (elements.ListItemAlternateHoverCssClass != null)
            this._listItemAlternateHoverCssClass = elements.ListItemAlternateHoverCssClass;

        if (elements.ListItemSelectedCssClass != null)
            this._listItemSelectedCssClass = elements.ListItemSelectedCssClass;

        if (elements.ListItemSelectedHoverCssClass != null)
            this._listItemSelectedHoverCssClass = elements.ListItemSelectedHoverCssClass;

        // register evetns
        $addHandler(document, "click", JsDropdownList.createDelegate(this, this.docClickHandler));
    },

    render: function() {
        // Create elemments
        this._globalContainerDiv = document.createElement("div");
        this._globalContainerDiv.style.textAlign = "left";

        this._headerDiv = document.createElement("div");

        this._clearDiv = document.createElement("div");
        this._clearDiv.style.clear = "both";


        this._textBox = document.createElement("input");
        this._textBox.type = "text";
        this._textBox.readOnly = "readonly";

        this._arrowImage = document.createElement("img");
        this._arrowImage.src = this._arrowImageUrl;
        this._arrowImage.align = "absmiddle";

        this._ulElement = document.createElement("ul");
        this._ulElement.style.position = "absolute";
        this._ulElement.style.clear = "both";
        this._ulElement.style.zIndex = 1000;

        // Set CssClass
        this._globalContainerDiv.className = this._globalCssClass;
        this._textBox.className = this._headerTextCssClass;
        this._arrowImage.className = this._arrowImageCssClass;
        this._ulElement.className = this._listBoxCssClass;

        // Reg events
        $addHandler(this._headerDiv, "click", JsDropdownList.createDelegate(this, this.tooglePopupHandler));
        if (this._arrowHoverImageUrl != null) {
            $addHandler(this._arrowImage, "mouseover", JsDropdownList.createDelegate(this, this.arrowImageMouseOverHandler));
            $addHandler(this._arrowImage, "mouseout", JsDropdownList.createDelegate(this, this.arrowImageMouseOutHandler));
        }

        // hide
        this.hideListBox();

        // Add to document
        this._headerDiv.appendChild(this._textBox);
        this._headerDiv.appendChild(this._arrowImage);
        this._headerDiv.appendChild(this._clearDiv);

        this._globalContainerDiv.appendChild(this._headerDiv);
        this._globalContainerDiv.appendChild(this._ulElement);

        if (this._parentContainer) {
            this.clearChildNodes(this._parentContainer);
            this._parentContainer.appendChild(this._globalContainerDiv);
        }
        else
            document.write(this._globalContainerDiv.innerHTML);

        // Fill list items
        this.updateListItems();
        this.set_selectedIndex(this._selectedIndex);
    },

    updateListItems: function() {
        this._listItems = [];
        this.clearChildNodes(this._ulElement);

        for (var i = 0; i < this._items.length; i++) {
            var item = this._items[i];
            var listItem = document.createElement("li");
            listItem.innerHTML = item.Text;
            listItem._dropdownList = this;

            $addHandler(listItem, "mouseover", this.listItemMouseOverHandler);
            $addHandler(listItem, "click", this.listItemClickHandler);

            this._listItems[this._listItems.length++] = listItem;
            this._ulElement.appendChild(listItem);
        }
    },

    get_selectedIndex: function() {
        return this._selectedIndex;
    },

    get_selectedItem: function() {
        if (this._selectedIndex > -1 && this._selectedIndex < this._items.length)
            return this._items[this._selectedIndex];
        else
            return null;
    },

    set_Items: function(items) {
        this._items = items;
        this.updateListItems();
    },

    get_selectedListItem: function() {
        if (this._selectedIndex > -1 && this._selectedIndex < this._listItems.length)
            return this._listItems[this._selectedIndex];
        else
            return null;
    },

    get_listItemIndex: function(listItem) {
        for (var i = 0; i < this._listItems.length; i++) {
            if (listItem == this._listItems[i])
                return i;
        }
        return -1;
    },

    set_selectedListItem: function(listItem) {
        var index = this.get_listItemIndex(listItem);
        this.set_selectedIndex(index);
    },

    set_selectedIndex: function(selectedIndex) {
        this._selectedIndex = selectedIndex;
        this.resetListItemsCssClass();
        var listItem = this.get_selectedListItem();
        if (listItem)
            this._textBox.value = listItem.innerHTML;
        else
            this._textBox.value = "";
    },

    resetListItemsCssClass: function() {
        for (var i = 0; i < this._listItems.length; i++) {
            if (i == this._selectedIndex)
                this._listItems[i].className = this._listItemSelectedCssClass;
            else if (i % 2 == 0)
                this._listItems[i].className = this._listItemCssClass;
            else
                this._listItems[i].className = this._listItemAlertnateCssClass;
        }
    },

    showListBox: function() {
        this._ulElement.style.display = "";
        this.resetListItemsCssClass();
    },

    hideListBox: function() {
        this._ulElement.style.display = "none";
    },

    tooglePopupHandler: function() {
        if (this._ulElement.style.display != "none")
            this.hideListBox();
        else
            this.showListBox();
    },

    clearChildNodes: function(el) {
        while (el.childNodes[0])
            el.removeChild(el.childNodes[0]);
    },

    docClickHandler: function(e) {
        e = window.event || e;
        var srcE = e.srcElement || e.target;
        if (srcE != this._textBox && srcE != this._arrowImage) {
            this.hideListBox();
        }
    },

    set_listItemMouseOver: function(listItem) {
        this.resetListItemsCssClass();
        var index = this.get_listItemIndex(listItem);
        if (index == this._selectedIndex)
            listItem.className = this._listItemSelectedHoverCssClass;
        else if (index % 2 == 0)
            listItem.className = this._listItemHoverCssClass;
        else
            listItem.className = this._listItemAlternateHoverCssClass;
    },

    selectListItem: function(listItem) {
        var selectedIndex = this.get_listItemIndex(listItem);
        if (selectedIndex != this._selectedIndex) {
            this.set_selectedIndex(selectedIndex);
            if (this._onSelectedItemChange) {
                var item = this._items[selectedIndex];
                this._onSelectedItemChange(item, selectedIndex);
            }
        }
        this.hideListBox();
    },

    listItemMouseOverHandler: function() {
        this._dropdownList.set_listItemMouseOver(this);
    },

    listItemClickHandler: function() {
        this._dropdownList.selectListItem(this);
    },

    arrowImageMouseOverHandler: function() {
        this._arrowImage.src = this._arrowHoverImageUrl;
    },

    arrowImageMouseOutHandler: function() {
        this._arrowImage.src = this._arrowImageUrl;
    }
}

JsDropdownList.createDelegate = function(instance, method) {
    return function() {
        return method.apply(instance, arguments);
    }
}


//register the js file
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

 　使用时需要定义一些CSS：

#locationpanel
{
    width: 178px;
    height: 20px;
    padding: 3px 0px 3px 0px;
    cursor: pointer;
}

.locationDDLGlobal
{
    width: 174px;
    height: 20px;
    cursor: pointer;
}
.locationDDLHeaderText
{
    width: 149px;
    padding-left: 2px;
    border-left: 1px solid #00202d;
    border-top: 1px solid #00202d;
    border-bottom: 1px solid #00202d;
    border-right: 0px none #00202d;
    background: #111111;
    color: #737373;
    cursor: pointer;
    float: left;
}
.locationDDLArrowImage
{
    width: 20px;
    height: 20px;
    border: none 0px;
    float: left;
}
.locationDDLListBox
{
    width: 171px;
    border-left: 1px solid #00202d;
    border-right: 1px solid #00202d;
    border-bottom: 1px solid #00202d;
    border-top: 0px none #00202d;
    background: #111111;
    color: #737373;
    font: 10pt Arial;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.locationDDLListBox li
{
    height: 20px;
    padding: 0px 3px 0px 3px;
    cursor: pointer;
}

.locationDDLListItem
{
    background: #1a1a1a;
}

.locationDDLListItemHover
{
    background: #1a1a1a;
    color: White;
}

.locationDDLListItemAlternate
{
    background: #0f0f0f;
}

.locationDDLListItemAlternateHover
{
    background: #0f0f0f;
    color: White;
}

.locationDDLListItemSelected, .locationDDLListItemSelectedHover
{    
    background-image: url(Images/Location_selectedItem_bg.gif);     
    background-repeat:repeat-x;
    background-position:center;
}    

   然后再页面中初始化JsDropdownlist即可：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsDropDownlistUnderAjax._Default" %>
<%@ Register Assembly="AjaxControlToolkit, Version=3.0.20820.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"
    Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="Style.css" type="text/css" />     
</head>

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="MyScriptManager" runat="server">
            <Scripts>
                <asp:ScriptReference Path="~/JsDropdownList.js" />
            </Scripts>
        </asp:ScriptManager>
        
        <div id="locationpanel"></div>
        
        <asp:HiddenField ID="hdnListItems" runat="server" />
        <asp:HiddenField ID="hdnSelectedIndex" runat="server" Value="-1" />
        <asp:LinkButton ID="lbtnForPostBack" runat="server" style="display:none" />
    </form>
</body>

</html>

<script type="text/javascript" language="javascript">

    var locationDropdownList = null;

    function onSelectedItemChange(item, selectedIndex) {
        // You can do something here when selectedItem changed
        
        // Save selectedIndex for next init after postback
        $get("<%=hdnSelectedIndex.ClientID%>").value = selectedIndex;
        __doPostBack("<%=lbtnForPostBack.ClientID%>", "");
    }


    Sys.Application.add_init(function() {
        var selectedIndex = $get("<%=hdnSelectedIndex.ClientID%>").value;
        var items = eval($get("<%=hdnListItems.ClientID%>").value);

        locationDropdownList = new JsDropdownList(
                    {
                        "ParentContainer": $get("locationpanel"),
                        "GlobalCssClass": "locationDDLGlobal",
                        "HeaderTextCssClass": "locationDDLHeaderText",
                        "ArrowImageCssClass": "locationDDLArrowImage",
                        "ListBoxCssClass": "locationDDLListBox",
                        "ListItemCssClass": "locationDDLListItem",
                        "ListItemHoverCssClass": "locationDDLListItemHover",
                        "ListItemAlternateCssClass": "locationDDLListItemAlternate",
                        "ListItemAlternateHoverCssClass": "locationDDLListItemAlternateHover",
                        "ListItemSelectedCssClass": "locationDDLListItemSelected",
                        "ListItemSelectedHoverCssClass": "locationDDLListItemSelectedHover",
                        "ArrowImageUrl": "Images/top_choose_your_location_ArrowButton.gif",
                        "ArrowHoverImageUrl": "Images/top_choose_your_location_ArrowButtonRollover.gif",
                        "Items": items,         // you can also add detail items here directly other than created by C#
                        "OnSelectedItemChange": onSelectedItemChange,
                        "SelectedIndex": selectedIndex
                    }
                );
    }
    );       

</script>

 

   其中用了Hidden空间保存了一些信息。完整Demo可以在这里下载。