鸿 网 互 联 www.68idc.cn

当前位置 : 服务器租用 > 网站制作教程 > >

纯手工打造dropdownlist控件

来源:互联网 作者:佚名 时间:2013-12-23 15:49
注册博客园已经有2年了,不敢在这上面发表任何关于技术方面的东西,自己太菜了(当然,不是今天我敢在园子里写文章, 就代表我牛了,呵呵。各位表误会哟。)。也算不上什么"文章"了。 因为我们公司的老大也写了一个控件,并且引用在项目中,我感觉深受启发,就

  注册博客园已经有2年了,不敢在这上面发表任何关于技术方面的东西,自己太菜了(当然,不是今天我敢在园子里写”文章“, 就代表我牛了,呵呵。各位表误会哟。)。也算不上什么"文章"了。 因为我们公司的老大也写了一个控件,并且引用在项目中,,我感觉深受启发,就蛋疼得捣鼓这么一个小东西,虽然没有实际意义,供大家相互学习吧。首先声明哈, 这小东西谨献给和我一样菜的菜鸟们,大虾们就表喷了,你看我2年了就捣鼓这么点,你说我这幼小的心灵。。。。

  先上图吧,看看效果。

JS代码:

1 ; (function ($) { 2 var DropdownList = function (oDataSouce, oControlsContainer, oListContainer) { 3 this._DataSouce = typeof (oDataSouce) == "object" ? oDataSouce : $.parseJSON(oDataSouce); ._oSelectInputDiv;._ListContainer = oListContainer;._ListContainerClick = ._ListPostionLeft;._ListPostionTop;._IsInited = ._MouseoutElement = ._RemberMouseClickNum = 1;._ArrayCollection = .AllowShowCheckBox = .ControlsContainerWidth = 200; }; 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));

网友评论
<