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) // Blog: http://qguohog.cnblogs.com // http://blog.csdn.net/sallay //---------------------------------------------------------------------------------------------- // 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" mce_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" mce_style="display:none" /> </form> </body> </html> <mce: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 } ); } ); // --></mce:script>

 

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