纯手工打造dropdownlist控件

昵称10504424 2013-12-12

展开全文

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

　　先上图吧,看看效果。

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./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>