纯手工打造dropdownlist控件
2016-04-26 14:24:05 来源: 阅读:
先上图吧,看看效果。
JS代码：
1 ; (function ($) { 2 var DropdownList = function (oDataSouce, oControlsContainer, oListContainer) { 3 this._DataSouce = typeof (oDataSouce) == "object" ? oDataSouce : $.parseJSON(oDataSouce); 4 this._parentElement = oControlsContainer;//容器控件对象 5 this._oSelectInputDiv;//选择后显示内容控件 6 this._ListContainer = oListContainer;//下拉列表控件对象 7 this._ListContainerClick = false;//判断列表是否被点击过 8 this._ListPostionLeft;//列表左边的距离 9 this._ListPostionTop;//列表上边的距离 10 this._IsInited = false;//是否已经初始化数据 11 this._MouseoutElement = false;//判断鼠标是否离开某个元素 12 this._RemberMouseClickNum = 1;////记录鼠标点击下拉时的次数； 13 this._ArrayCollection = new Array;//多选后用于存放结果; 14 15 this.AllowShowCheckBox = false;//是否允许多选 16 this.ControlsContainerWidth = 200;//默认控件宽度为200像素 17 }; 18 19 DropdownList.prototype = { 20 InitControl: function () { 21 var _oSelf = this; 22 var _oSelectBorderDiv = $("<div>", { "class": "selectBorder", style: "width:" + _oSelf.ControlsContainerWidth + "px;" }).appendTo(this._parentElement); 23 _oSelectBorderDiv.mouseover(function () { $(this).css({ border: "1px solid blue" }) }).mouseout(function () { $(this).css({ border: "1px solid black" }) }); 24 _oSelf._oSelectInputDiv = $("<div>", { "class": "selectInput", style: "width:" + (_oSelf.ControlsContainerWidth - 10) + "px;" }).appendTo($(_oSelectBorderDiv)); 25 var _oSelectImgDiv = $("<div>", { "class": "selectImg" }).appendTo($(_oSelectBorderDiv)); 26 var _oSelectImg = $("<img>", { 27 src: "images/arrow.gif", style: "cursor:pointer", 28 click: function () { 29 var _oShowList = { width: _oSelectBorderDiv.width(), border: " 1px solid gray", display: "" }; 30 if (!_oSelf._IsInited) { 31 _oSelf._InitData(); 32 _oSelf._ListPostionLeft = _oSelectBorderDiv.position().left; 33 _oSelf._ListPostionTop = _oSelectBorderDiv.position().top + _oSelectBorderDiv.height() + 10; 34 _oSelf._ListContainer.css(_oShowList); 35 _oSelf._ListContainer.offset({ top: _oSelf._ListPostionTop, left: _oSelf._ListPostionLeft }); 36 _oSelf._IsInited = true; 37 _oSelf._RemberMouseClickNum += 1; 38 } else { 39 if (_oSelf._RemberMouseClickNum % 2 == 0) { 40 _oSelf._MouseoutElement = true; 41 _oSelf._RemberMouseClickNum = 1; 42 } if (_oSelf._ListContainerClick) { 43 _oSelf._RemberMouseClickNum += 1; 44 _oSelf._MouseoutElement = false; 45 _oSelf._BindDocumentEvent(); 46 _oSelf._ListContainer.css(_oShowList); 47 _oSelf._ListContainerClick = false; 48 } 49 else { 50 _oSelf._RemberMouseClickNum += 1; 51 _oSelf._BindDocumentEvent(); 52 _oSelf._ListContainer.css(_oShowList); 53 } 54 } _oSelf._SetListboxSelectedStatus(_oSelf.AllowShowCheckBox); 55 }, mouseout: function () { 56 _oSelf._MouseoutElement = true; 57 _oSelf._RemberMouseClickNum += 1; 58 } 59 }).appendTo(_oSelectImgDiv); 60 }, 61 _InitData: function () { 62 var _oSelf = this; 63 var _oSelectCollection; 64 for (var i = 0, _iDataCpount = _oSelf._DataSouce.length; i < _iDataCpount; i++) { 65 var _oDiv = $("<div>", { 66 "class": "lists", id: "div_" + i, selected: "false", selectedIndex: "" + i + "", title: "" + this._DataSouce[i].text + "", click: function () { 67 if (_oSelf.AllowShowCheckBox) { 68 _oSelf._BindListboxChecboxClickEvent(this); 69 } else { _oSelf._GetListboxText(this); } 70 }, mouseout: function () { _oSelf._MouseoutElement = true; } 71 }).mouseover(function () { 72 _oSelf._BindMouseoverEvent($(this)); 73 _oSelf._BindDocumentEvent(); 74 }).mouseout(function () { 75 _oSelf._BindMouseoutEvent($(this)); 76 }); 77 this._ListContainer.append(_oDiv); 78 if (_oSelf.AllowShowCheckBox) { 79 _oDiv.append($("<input>", { 80 type: "checkbox", id: "checkbox_" + i, "for": "label_" + i, click: function (oCheck) { 81 var _sID = oCheck.srcElement.id || oCheck.tagName.id; 82 var _oParentDiv = $("#" + _sID).parent(); 83 _oSelf._BindListboxChecboxClickEvent(_oParentDiv); 84 } 85 })); 86 } _oDiv.append($("<label>", { id: "label_" + i, key: "" + this._DataSouce[i].value + "" }).html(this._DataSouce[i].text)); 87 } if (_oSelf.AllowShowCheckBox) { 88 _oSelf._CreateListboxFoot(); 89 } 90 }, 91 _BindMouseoverEvent: function (oDiv) { 92 oDiv.mouseover(function () { 93 if ($(this).attr("selected") != "selected") { 94 $(this).css({ backgroundColor: "#3A8FCF" }) 95 } 96 }); 97 }, 98 _BindMouseoutEvent: function (oDiv) { 99 oDiv.mouseout(function () { 100 if ($(this).attr("selected") != "selected") { 101 $(this).css({ backgroundColor: "#fff" }) 102 } 103 }); 104 }, 105 _BindCheckboxClickEvent: function (oCheckBox, oDiv) { 106 _oSelf = this; if (!oCheckBox[0].checked) { 107 oCheckBox[0].checked = true; oDiv.css({ backgroundColor: "#3A8FCF" }).unbind("mouseover").unbind("mouseout"); 108 } else { 109 oCheckBox[0].checked = false; 110 oDiv.css({ backgroundColor: "#fff" }).bind("mouseover", _oSelf._BindMouseoverEvent(oDiv)).bind("mouseout", _oSelf._BindMouseoutEvent(oDiv)); 111 } 112 }, 113 _BindListboxChecboxClickEvent: function (oDiv) { 114 var _oSelf = this; 115 var _oParentContainer = $(oDiv); 116 var _oCheckBoxElement = _oParentContainer.children().first(); 117 var _oLabelElement = _oParentContainer.find("label"); 118 _oSelf._BindCheckboxClickEvent(_oCheckBoxElement, $(oDiv)); 119 _oSelf._MouseoutElement = false; 120 _oSelectCollection = { key: _oLabelElement.attr("key"), value: _oLabelElement.html(), selectedIndex: $(oDiv).attr("selectedIndex") }; 121 _oSelf._ArrayCollection.push(_oSelectCollection); 122 }, 123 _BindDocumentEvent: function () { 124 var _oSelf = this; 125 $(document).click(function () { 126 if (_oSelf._MouseoutElement) { 127 _oSelf._ListContainer.css({ display: "none" }); 128 _oSelf._MouseoutElement = false; 129 _oSelf._RemberMouseClickNum = 1; 130 if (_oSelf.AllowShowCheckBox) { 131 if (_oSelf._oSelectInputDiv.html() == "") { 132 _oSelf._SetCheckboxSelectedStatus(false, "#fff"); 133 _oSelf._ArrayCollection = new Array; 134 } 135 } 136 } 137 }); 138 }, 139 _GetListboxText: function (oDiv) { 140 var _oSelf = this; 141 var _oLabelElement = $(oDiv).find("label"); 142 var _sSelectedText = _oLabelElement.html(); 143 var _sSelectedValue = _oLabelElement.attr("key"); 144 var _oDisplayText = _oSelf._oSelectInputDiv; 145 var _iSelectedIndex = $(oDiv).attr("selectedIndex"); 146 _oDisplayText.html(_sSelectedText); 147 _oDisplayText.attr({ "key": _sSelectedValue, "selected": true, "selectedIndex": _iSelectedIndex, title: "" + _sSelectedText + "" }); 148 _oSelf._SetListboxDisplayStatus(); 149 }, 150 _SetListboxDisplayStatus: function () { 151 var _oSelf = this; 152 _oSelf._ListContainer.css({ display: "none" }); 153 _oSelf._ListContainerClick = true; 154 _oSelf._MouseoutElement = false; 155 }, 156 _SetListboxSelectedStatus: function (bAllowShowCheckBox) { 157 var _oSelf = this; 158 if (bAllowShowCheckBox) { 159 if (_oSelf._ArrayCollection.length > 0) { 160 _oSelf._SetCheckboxSelectedStatus(true, "#3A8FCF") 161 } 162 } else { 163 var _sCurrentSelectedText = _oSelf._oSelectInputDiv.attr("selectedIndex"); 164 for (var libIndex = 0, libLen = _oSelf._ListContainer.children().length; libIndex < libLen; libIndex++) { 165 var _oDiv = _oSelf._ListContainer.children().eq(libIndex); 166 if (_oDiv.attr("selectedIndex") == _sCurrentSelectedText) { 167 _oDiv.attr("selected", true).css({ background: "#3A8FCF" }); 168 } else { _oDiv.attr("selected", false).css({ background: "#fff" }); } 169 } 170 } 171 }, 172 _SetCheckboxSelectedStatus: function (bChecked, sColor) { 173 var _oSelf = this; 174 for (var _iAcIndex = 0, _iAcLen = _oSelf._ArrayCollection.length; _iAcIndex < _iAcLen; _iAcIndex++) { 175 var _oDiv = _oSelf._ListContainer.children().eq(_oSelf._ArrayCollection[_iAcIndex].selectedIndex); 176 _oDiv.find("input[type=checkbox]")[0].checked = bChecked; 177 _oDiv.css({ background: sColor }); 178 } 179 }, 180 181 _CreateListboxFoot: function () { 182 var _oSelf = this; 183 $("<div>", { "class": "foot", selectedIndex: "9999" }).append( 184 $("<img>", { 185 src: "images/ok.gif", click: function () { 186 var _sRsult = ""; 187 for (var _iAcIndex = 0, _iAcLen = _oSelf._ArrayCollection.length; _iAcIndex < _iAcLen; _iAcIndex++) { 188 if (_iAcIndex == 0) { 189 _sRsult += _oSelf._ArrayCollection[_iAcIndex].value + ";"; 190 } 191 if (_iAcIndex == _iAcLen - 1) { 192 _sRsult += _oSelf._ArrayCollection[_iAcIndex].value; 193 } 194 } 195 _oSelf._oSelectInputDiv.html(_sRsult); 196 _oSelf._MouseoutElement = false; 197 _oSelf._ListContainer.css({ display: "none" }); 198 } 199 })).append($("<img>", { 200 src: "images/cancle.gif", click: function () { 201 _oSelf._SetCheckboxSelectedStatus(false, "#fff"); 202 _oSelf._ArrayCollection = new Array(); 203 _oSelf._MouseoutElement = true; 204 _oSelf._BindDocumentEvent(); 205 _oSelf._oSelectInputDiv.html(""); 206 } 207 })).appendTo(_oSelf._ListContainer); 208 }, 209 }; 210 $.extend(true, window, { 211 Controls: { DropdownList: DropdownList } 212 }) 213 }(jQuery));
下面是HTML
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <link href="css/JsDropdownList.css" rel="stylesheet" /> 7 <script src="Js/jquery-1.8.3.min.js"></script> 8 <script src="Js/JsDropdownList.js"></script> 9 <script type="text/javascript"> 10 $(function () { 11 var _oDropdownList = new Controls.DropdownList([{ "value": 1, "text": "测试测试测试测试测试测试1" }, { "value": 2, "text": "测试测试测试测试测试测试2" }, { "value": 3, "text": "测试3" }, { "value": 4, "text": "测试4" }], $("#div_Container"), $("#div_list")); 12 _oDropdownList.AllowShowCheckBox = true; 13 _oDropdownList.InitControl(); 14 }); 15 </script> 16 </head> 17 <body> 18 <table> 19 <tr> 20 <td>选择：</td> 21 <td> 22 <div id="div_Container"> 23 </div> 24 </td> 25 </tr> 26 <tr> 27 <td>选择：</td> 28 <td> 29 <div id="div1" style="float: left;"> 30 <input id="Text2" type="text" /> 31 </div> 32 </td> 33 </tr> 34 <tr> 35 <td>选择：</td> 36 <td> 37 <div id="div2" style="float: left;"> 38 <input id="Text1" type="text" /> 39 </div> 40 </td> 41 </tr> 42 </table> 43 <div id="div_list" style="display: none; overflow: hidden; padding: 0px; margin: 0px;"> 44 </div> 45 </body> 46 </html>
还是那句话，表喷啊。 希望各位给点宝贵的意见， 第一次弄这个东西，还不太会。 见谅！！
后续打算写一个grid表格控件，并结合这个下拉框控件和后台处理程序。grid还在构思中。不知道咋个插入代码下载连接，需要代码的童靴可以留个邮箱吧， 或者直接拷贝上面的代码。