自定义样式的select下拉框深入探索
2014-08-20 10:30 大额_skylar 阅读(4760) 评论(4) 编辑 收藏 举报第一个版本：
首先实现自定义select下拉框应该具有的功能，我是选择将原来的select隐藏掉，自己在jquery代码中动态写进去<dl><dd><dt>这样的结构来模拟真正的select的操作。
用来模拟select框的div结构如下：
<div class="selectbox">//包裹整个模拟框的盒子
<div class="currentselected"></div>//用于当前默认显示的selected的元素
<div class="selectoption"></div>//模拟弹出的select下拉框<dl><dd><dt>结构包裹在其中
</div>
代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 3 <head> 4 <title></title> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <script type="text/javascript" src="jquery.min.js"></script> 7 8 <style> 9 p{float:left;margin:20px;font-size:14px} 10 11 12 .i_selectbox { 13 margin-top:20px; 14 height:32px; 15 position:relative; 16 font-size:14px 17 } 18 /* 默认显示的select框*/ 19 .i_selectbox .i_currentselected { 20 width:150px; 21 height:24px; 22 background:url(select.png) 176px 4px no-repeat; 23 border:1px solid #cdcdcd; 24 text-indent:10px; 25 line-height:24px; 26 cursor:pointer 27 } 28 /* 下拉选择框 */ 29 .i_selectbox .i_selectoption { 30 overflow-x:hidden; 31 overflow-y:hidden; 32 position:absolute; 33 left:0px; 34 top:17px; 35 padding:5px; 36 background-color:#fff; 37 background:rgba(255,255,255,.9); 38 border:1px solid #eee 39 } 40 .i_selectbox .i_selectoption dt { 41 height:24px; 42 background-color:#eee; 43 text-indent:5px; 44 font-style:italic; 45 color:#555; 46 line-height:24px; 47 } 48 .i_selectbox .i_selectoption dd{ 49 margin-left: -3px; 50 height:30px; 51 border-bottom:1px solid #cdcdcd; 52 cursor:pointer; 53 text-indent:2px; 54 line-height:30px 55 } 56 .i_selectbox .i_selectoption dd:hover{ 57 background-color:#cdcdcd; 58 color:#fff 59 } 60 .i_selectbox .i_selectoption dd.selected{ 61 background-color:#f17f36; 62 color:#fff 63 } 64 </style> 65 <head> 66 <body> 67 <select class="my_select"> 68 69 <option value="0">Alabama</option> 70 <option value="1">Alaska</option> 71 <option value="2">Arizona</option> 72 73 <option value="3">Arkansas</option> 74 <option value="4">California</option> 75 <option value="5">Colorado</option> 76 77 <option value="6">Connecticut</option> 78 <option value="7">Delaware</option> 79 <option value="8">Columbia</option> 80 <option value="9">Florida</option> 81 82 </select> 83 <script> 84 85 /*插件写法的函数*/ 86 $.fn.newStyle = function(){ 87 var set = { 88 selectbox : \'i_selectbox\', 89 showselect : \'i_currentselected\', 90 selectoption : \'i_selectoption\', 91 curselect : \'selected\', 92 width : 200, 93 height :150, 94 zindex : 2 95 }; 96 /*让最初的select隐藏*/ 97 $(this).hide(); 98 /*动态写进去html替代原本的select*/ 99 var html = \'<div class="\'+set.selectbox+\'" style="zindex:\'+set.zindex+\'">\' 100 +\'<div class="\'+set.showselect+\'" style="width:\'+set.width+\'px;">\'+$(this).find(\'option:selected\').text()+\'</div>\' 101 +\'<dl class="\'+set.selectoption+\'" style="display:none;width:\'+set.width+\'px" >\'; 102 if($(this).find(\'optgroup\').size()>0){ 103 $(this).find(\'optgroup\').each(function(){ 104 html += \'<dt>\'+$(this).attr(\'label\')+\'</dt>\'; 105 $(this).find(\'option\').each(function(){ 106 if($(this).is(\':selected\')){ 107 html += \'<dd class="\'+set.curselect+\'">\'+$(this).text()+\'</dd>\'; 108 }else{ 109 html += \'<dd>\'+$(this).text()+\'</dd>\'; 110 } 111 }); 112 }); 113 }else{ 114 $(this).find(\'option\').each(function(){ 115 if($(this).is(\':selected\')){ 116 html += \'<dd class="\'+set.curselect+\'">\'+$(this).text()+\'</dd>\'; 117 }else{ 118 html += \'<dd>\'+$(this).text()+\'</dd>\'; 119 } 120 }); 121 122 } 123 /*将html插入到select框的后面*/ 124 $(\'select\').after(html); 125 console.log(0); 126 /*添加事件*/ 127 128 /*默认显示框的选择事件toggle选择*/ 129 $(\'.\'+set.showselect).toggle(function(){ 130 console.log(1); 131 /*$(\'.selectoption\').hide();*/ 132 $(\'.\'+set.selectbox).css(\'zindex\',set.zindex); 133 $(\'.\'+set.selectoption).css(\'zindex\',set.zindex+1); 134 $(\'.\'+set.selectoption).toggle(); 135 },function(){ 136 $(\'.\'+set.selectoption).css(\'zindex\',set.zindex); 137 $(\'.\'+set.selectoption).toggle(); 138 }); 139 /*下拉列表的选择事件*/ 140 $(\'.\'+set.selectoption).find(\'dd\').click(function(){ 141 console.log(2); 142 $(this).addClass(set.curselect).siblings().removeClass(set.curselect); 143 var index = $(\'.\'+set.selectoption).find(\'dd\').index(this); 144 $(\'.\'+set.showselect).text($(this).text()); 145 $(this).find(\'option\').eq(index).attr(\'selected\',\'selected\'); 146 $(\'.\'+set.selectoption).hide(); 147 }); 148 /*点击select框之外的其他部分的时候select框应该收起*/ 149 $(\'html,body\').click(function(e){ 150 /* 判断当前的点击事件目标不是set.selectoption这个class*/ 151 if(e.target.className.indexOf(set.selectoption)==-1){ 152 $(\'.\'+set.selectoption).hide(); 153 $(\'.\'+set.selectbox).css(\'zIndex\',set.zindex); 154 } 155 }); 156 157 } 158 159 $(\'.my_select\').newStyle(); 160 161 </script> 162 </body> 163 </html>
TIPs：1.给默认显示的下拉框添加toggle事件而不是一般的click事件使得它的连续点击具有意义；
2.给html，body添加事件，判断在点击自定义的下拉框之外的任何地方的时候，自定义下拉框收起。
本来我也以为，一段代码一个功能这样写完就可以了，但是继续改进下去，可以学到的东西真的很多。
第二个版本：
这里是给我自定义的select下拉框添加了键盘选择事件的版本，上下键选择，同时实时更新默认显示框中的内容，esc键实现自定义下拉框收起，此时上下键依然可以实时选择。
代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 3 <head> 4 <title></title> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <script type="text/javascript" src="jquery.min.js"></script> 7 8 <style> 9 10 11 /* 这里来定义你自己的select框的样式 */ 12 .i_selectbox { 13 margin-top:20px; 14 height:32px; 15 position:relative; 16 font-size:14px 17 } 18 /* 默认显示的select框*/ 19 .i_selectbox .i_currentselected { 20 width:150px; 21 height:24px; 22 background:url(select.png) 176px 4px no-repeat; 23 border:1px solid #cdcdcd; 24 text-indent:10px; 25 line-height:24px; 26 cursor:pointer 27 } 28 /* 这里是隐藏的input框 */ 29 #hiddenput { 30 display: block; 31 width:200px; 32 height:18px; 33 margin-top: -25px; 34 position: absolute; 35 z-index:-2; 36 opacity:0; 37 filter:alpha(opacity=0); 38 } 39 /* 下拉选择框 */ 40 .i_selectbox .i_selectoption { 41 overflow-x:hidden; 42 overflow-y:hidden; 43 position:absolute; 44 left:0px; 45 top:17px; 46 padding:5px; 47 background-color:#fff; 48 background:rgba(255,255,255,.9); 49 border:1px solid #eee 50 } 51 .i_selectbox .i_selectoption dt { 52 height:24px; 53 background-color:#eee; 54 text-indent:5px; 55 font-style:italic; 56 color:#555; 57 line-height:24px; 58 } 59 .i_selectbox .i_selectoption dd{ 60 margin-left: -3px; 61 height:30px; 62 border-bottom:1px solid #cdcdcd; 63 cursor:pointer; 64 text-indent:2px; 65 line-height:30px 66 } 67 .i_selectbox .i_selectoption dd:hover{ 68 background-color:#cdcdcd; 69 color:#fff 70 } 71 .i_selectbox .i_selectoption dd.selected{ 72 background-color:#f17f36; 73 color:#fff 74 } 75 </style> 76 <head> 77 <body> 78 <select class="my_select"> 79 80 <option value="0">Alabama</option> 81 <option value="1">Alaska</option> 82 <option value="2">Arizona</option> 83 84 <option value="3">Arkansas</option> 85 <option value="4">California</option> 86 <option value="5">Colorado</option> 87 88 <option value="6">Connecticut</option> 89 <option value="7">Delaware</option> 90 <option value="8">Columbia</option> 91 <option value="9">Florida</option> 92 93 </select> 94 <script> 95 (function($){ 96 /*插件写法的函数*/ 97 $.fn.newStyle = function(){ 98 var set = { 99 selectbox : \'i_selectbox\', 100 showselect : \'i_currentselected\', 101 selectoption : \'i_selectoption\', 102 curselect : \'selected\', 103 width : 200, 104 height :150, 105 zindex : 2 106 }; 107 /*让最初的select隐藏*/ 108 $(this).hide(); 109 /*动态写进去html替代原本的select*/ 110 var html = \'<div class="\'+set.selectbox+\'" style="zindex:\'+set.zindex+\'">\' 111 +\'<div class="\'+set.showselect+\'" style="width:\'+set.width+\'px;">\'+$(this).find(\'option:selected\').text()+\'</div>\' 112 +\'<input type="text" id="hiddenput" name="hiddenput"/>\' 113 +\'<dl class="\'+set.selectoption+\'" style="display:none;width:\'+set.width+\'px" >\'; 114 if($(this).find(\'optgroup\').size()>0){ 115 $(this).find(\'optgroup\').each(function(){ 116 html += \'<dt>\'+$(this).attr(\'label\')+\'</dt>\'; 117 $(this).find(\'option\').each(function(){ 118 if($(this).is(\':selected\')){ 119 html += \'<dd class="\'+set.curselect+\'">\'+$(this).text()+\'</dd>\'; 120 }else{ 121 html += \'<dd>\'+$(this).text()+\'</dd>\'; 122 } 123 }); 124 }); 125 }else{ 126 $(this).find(\'option\').each(function(){ 127 if($(this).is(\':selected\')){ 128 html += \'<dd class="\'+set.curselect+\'">\'+$(this).text()+\'</dd>\'; 129 }else{ 130 html += \'<dd>\'+$(this).text()+\'</dd>\'; 131 } 132 }); 133 134 } 135 /*将html插入到select框的后面*/ 136 $(\'select\').after(html); 137 138 139 /*为了写起来方便，给外围的box和当前显示的select框还有自定义的下拉框一个简单的变量*/ 140 thisbox = $(\'.\'+set.selectbox); 141 thisselect = $(\'.\'+set.showselect); 142 thisoption = $(\'.\'+set.selectoption); 143 /*添加事件*/ 144 145 /*默认显示框的选择事件，点击默认显示框，下拉列表会在可见与不可见状态之间切换*/ 146 thisselect.toggle(function(){ 147 /*$(\'.selectoption\').hide();*/ 148 thisbox.css(\'zindex\',set.zindex); 149 thisoption.css(\'zindex\',set.zindex+1); 150 thisoption.toggle(); 151 },function(){ 152 thisoption.css(\'zindex\',set.zindex); 153 thisoption.toggle(); 154 }); 155 156 /*下拉列表的选择事件*/ 157 thisoption.find(\'dd\').click(function(){ 158 $(this).addClass(set.curselect).siblings().removeClass(set.curselect); 159 var index = thisoption.find(\'dd\').index(this); 160 thisselect.text($(this).text()); 161 $(this).find(\'option\').eq(index).prop(\'selected\',true); 162 thisoption.hide(); 163 }); 164 165 /*点击默认显示框时要给我隐藏的input获得焦点*/ 166 thisselect.click(function(){ 167 $(\'input\')[0].focus(); 168 }) 169 170 var index = 0; 171 /*下拉列表的键盘事件*/ 172 $("input").keyup(function(e){ 173 var keycode = e.which; 174 console.log(keycode); 175 var ddtarget = thisoption.find(\'dd\'); 176 /*向下*/ 177 if(keycode == 40){ 178 index++; 179 console.log(index); 180 if(index == ddtarget.length){ 181 index = 0; 182 console.log(index); 183 } 184 /* 设为当前选中项,同時在默认显示的select框中同步显示*/ 185 thisoption.find(\'dd\').eq(index).addClass(set.curselect).siblings().removeClass(set.curselect); 186 var ddindex = thisoption.find(\'dd\').eq(index).index(this); 187 thisselect.text(thisoption.find(\'dd\').eq(index).text()); 188 $(this).find(\'option\').eq(ddindex).prop(\'selected\',true); 189 } 190 /*向上*/ 191 if(keycode == 38){ 192 193 console.log(index); 194 if(index == 0){ 195 index = ddtarget.length; 196 console.log(index); 197 } 198 index--; 199 /* 设为当前选中项，同時在默认显示的select框中同步显示*/ 200 thisoption.find(\'dd\').eq(index).addClass(set.curselect).siblings().removeClass(set.curselect); 201 var ddindex = thisoption.find(\'dd\').eq(index).index(this); 202 thisselect.text(thisoption.find(\'dd\').eq(index).text()); 203 $(this).find(\'option\').eq(ddindex).prop(\'selected\',true); 204 } 205 /*按下Esc 隐藏弹出层*/ 206 if (keycode == 27) { 207 console.log(\'esc\'); 208 if (thisoption.is(":visible")) { 209 thisoption.hide(); 210 } 211 } 212 }); 213 214 215 /*点击select框之外的其他部分的时候select框应该收起*/ 216 $(\'html,body\').click(function(e){ 217 /* 判断当前的点击事件目标不是set.selectoption这个class*/ 218 if(e.target.className.indexOf(set.selectoption)==-1){ 219 thisoption.hide(); 220 thisbox.css(\'zIndex\',set.zindex); 221 } 222 }); 223 224 /*取消下拉列表选择事件的冒泡*/ 225 thisoption.find(\'dd\').click(function(e){ 226 e.stopPropagation(); 227 }); 228 229 } 230 })(jQuery); 231 $(\'.my_select\').newStyle(); 232 233 </script> 234 </body> 235 </html>
实现的思路是：将一个input框隐藏在默认显示的selected框下面，点击默认显示框时同时是它获得焦点，然后获得键盘事件，对自定义的select下拉框实现一系列的操作。
关键代码：
1 /*点击默认显示框时要给我隐藏的input获得焦点*/ 2 thisselect.click(function(){ 3 $(\'input\')[0].focus(); 4 });
TIPS：1.要有输入，才有键盘的事件，不然怎么读取呢？
2.键盘上下选择时最后一个和第一个的切换值得注意，要连贯。
是的，到这里还不是结束，那么我还可以做点什么呢？ 让我的代码更好看一点吧。
第三个版本：
学习插件写法，让我的代码也可以暴露方法给别人用
代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 3 <head> 4 <title></title> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <script type="text/javascript" src="jquery.min.js"></script> 7 8 <style> 9 10 11 /* 这里来定义你自己的select框的样式 */ 12 .i_selectbox { 13 margin-top:20px; 14 height:32px; 15 position:relative; 16 font-size:14px 17 } 18 /* 默认显示的select框*/ 19 .i_selectbox .i_currentselected { 20 width:150px; 21 height:24px; 22 background:url(select.png) 176px 4px no-repeat; 23 border:1px solid #cdcdcd; 24 text-indent:10px; 25 line-height:24px; 26 cursor:pointer 27 } 28 /* 这里是隐藏的input框 */ 29 #hiddenput { 30 display: block; 31 width:200px; 32 height:18px; 33 margin-top: -25px; 34 position: absolute; 35 z-index:-2; 36 opacity:0; 37 filter:alpha(opacity=0); 38 } 39 /* 下拉选择框 */ 40 .i_selectbox .i_selectoption { 41 overflow-x:hidden; 42 overflow-y:hidden; 43 position:absolute; 44 left:0px; 45 top:17px; 46 padding:5px; 47 background-color:#fff; 48 background:rgba(255,255,255,.9); 49 border:1px solid #eee 50 } 51 .i_selectbox .i_selectoption dt { 52 height:24px; 53 background-color:#eee; 54 text-indent:5px; 55 font-style:italic; 56 color:#555; 57 line-height:24px; 58 } 59 .i_selectbox .i_selectoption dd{ 60 margin-left: -3px; 61 height:30px; 62 border-bottom:1px solid #cdcdcd; 63 cursor:pointer; 64 text-indent:2px; 65 line-height:30px 66 } 67 .i_selectbox .i_selectoption dd:hover{ 68 background-color:#cdcdcd; 69 color:#fff 70 } 71 .i_selectbox .i_selectoption dd.selected{ 72 background-color:#f17f36; 73 color:#fff 74 } 75 /* 这里是新定义的按钮 */ 76 #optionShow { 77 display:block; 78 position: absolute; 79 margin-left: 300px; 80 81 } 82 #optionHide { 83 display:block; 84 position: absolute; 85 margin-left: 300px; 86 margin-top: 50px; 87 } 88 89 </style> 90 91 <head> 92 <body> 93 <select class="my_select"> 94 95 <option value="0">Alabama</option> 96 <option value="1">Alaska</option> 97 <option value="2">Arizona</option> 98 99 <option value="3">Arkansas</option> 100 <option value="4">California</option> 101 <option value="5">Colorado</option> 102 103 <option value="6">Connecticut</option> 104 <option value="7">Delaware</option> 105 <option value="8">Columbia</option> 106 <option value="9">Florida</option> 107 108 </select> 109 <input type="button" id="optionShow" name="optionShow" value="点击这里显示下拉框"/> 110 <input type="button" id="optionHide" name="optionHide" value="点击这里隐藏下拉框"/> 111 <script> 112 (function($){ 113 /*这个对象定义的位置值得注意*/ 114 var set = { 115 selectbox : \'i_selectbox\', 116 showselect : \'i_currentselected\', 117 selectoption : \'i_selectoption\', 118 curselect : \'selected\', 119 width : 200, 120 height :150, 121 zindex : 2 122 } 123 $.fn.extend({ 124 125 /*插件写法的函数*/ 126 newStyle : function(){ 127 128 /*让最初的select隐藏*/ 129 $(this).hide(); 130 /*动态写进去html替代原本的select*/ 131 var html = \'<div class="\'+set.selectbox+\'" style="zindex:\'+set.zindex+\'">\' 132 +\'<div class="\'+set.showselect+\'" style="width:\'+set.width+\'px;">\'+$(this).find(\'option:selected\').text()+\'</div>\' 133 +\'<input type="text" id="hiddenput" name="hiddenput"/>\' 134 +\'<dl class="\'+set.selectoption+\'" style="display:none;width:\'+set.width+\'px" >\'; 135 if($(this).find(\'optgroup\').size()>0){ 136 $(this).find(\'optgroup\').each(function(){ 137 html += \'<dt>\'+$(this).attr(\'label\')+\'</dt>\'; 138 $(this).find(\'option\').each(function(){ 139 if($(this).is(\':selected\')){ 140 html += \'<dd class="\'+set.curselect+\'">\'+$(this).text()+\'</dd>\'; 141 }else{ 142 html += \'<dd>\'+$(this).text()+\'</dd>\'; 143 } 144 }); 145 }); 146 }else{ 147 $(this).find(\'option\').each(function(){ 148 if($(this).is(\':selected\')){ 149 html += \'<dd class="\'+set.curselect+\'">\'+$(this).text()+\'</dd>\'; 150 }else{ 151 html += \'<dd>\'+$(this).text()+\'</dd>\'; 152 } 153 }); 154 155 } 156 /*将html插入到select框的后面*/ 157 $(\'select\').after(html); 158 159 160 /*为了写起来方便，给外围的box和当前显示的select框还有自定义的下拉框一个简单的变量*/ 161 thisbox = $(\'.\'+set.selectbox); 162 thisselect = $(\'.\'+set.showselect); 163 thisoption = $(\'.\'+set.selectoption); 164 /*添加事件*/ 165 166 /*默认显示框的选择事件，点击默认显示框，下拉列表会在可见与不可见状态之间切换*/ 167 thisselect.toggle(function(){ 168 /*$(\'.selectoption\').hide();*/ 169 thisbox.css(\'zindex\',set.zindex); 170 thisoption.css(\'zindex\',set.zindex+1); 171 thisoption.toggle(); 172 },function(){ 173 thisoption.css(\'zindex\',set.zindex); 174 thisoption.toggle(); 175 }); 176 177 /*下拉列表的选择事件*/ 178 thisoption.find(\'dd\').click(function(){ 179 $(this).addClass(set.curselect).siblings().removeClass(set.curselect); 180 var index = thisoption.find(\'dd\').index(this); 181 thisselect.text($(this).text()); 182 $(this).find(\'option\').eq(index).prop(\'selected\',true); 183 thisoption.hide(); 184 }); 185 186 /*点击默认显示框时要给我隐藏的input获得焦点*/ 187 thisselect.click(function(){ 188 /*这里面[0]起了很大作用喔*/ 189 $(\'input\')[0].focus(); 190 }) 191 192 var index = 0; 193 /*下拉列表的键盘事件*/ 194 $("#hiddenput").keyup(function(e){ 195 var keycode = e.which; 196 console.log(keycode); 197 var ddtarget = thisoption.find(\'dd\'); 198 /*向下*/ 199 if(keycode == 40){ 200 index++; 201 if(index == ddtarget.length){ 202 index = 0; 203 } 204 /* 设为当前选中项,同時在默认显示的select框中同步显示*/ 205 thisoption.find(\'dd\').eq(index).addClass(set.curselect).siblings().removeClass(set.curselect); 206 var ddindex = thisoption.find(\'dd\').eq(index).index(this); 207 thisselect.text(thisoption.find(\'dd\').eq(index).text()); 208 $(this).find(\'option\').eq(ddindex).prop(\'selected\',true); 209 } 210 /*向上*/ 211 if(keycode == 38){ 212 if(index == 0){ 213 index = ddtarget.length; 214 } 215 index--; 216 /* 设为当前选中项，同時在默认显示的select框中同步显示*/ 217 thisoption.find(\'dd\').eq(index).addClass(set.curselect).siblings().removeClass(set.curselect); 218 var ddindex = thisoption.find(\'dd\').eq(index).index(this); 219 thisselect.text(thisoption.find(\'dd\').eq(index).text()); 220 $(this).find(\'option\').eq(ddindex).prop(\'selected\',true); 221 } 222 /*按下Esc 隐藏弹出层*/ 223 if (keycode == 27) { 224 console.log(\'esc\'); 225 if (thisoption.is(":visible")) { 226 thisoption.hide(); 227 } 228 } 229 }); 230 231 232 /*点击select框之外的其他部分的时候select框应该收起*/ 233 $(\'html\').click(function(e){ 234 /* 判断当前的点击事件目标不是set.selectoption这个class*/ 235 if(e.target.className.indexOf(set.selectoption)==-1){ 236 thisoption.hide(); 237 thisbox.css(\'zIndex\',set.zindex); 238 } 239 }); 240 241 /*取消下拉列表选择事件的冒泡*/ 242 thisoption.find(\'dd\').click(function(e){ 243 e.stopPropagation(); 244 }); 245 246 },/*newStyle函数结束*/ 247 showSelect : function(){ 248 $(this).click(function(e){ 249 $(".i_selectoption").show(); 250 //$(\'.\'+set.selectoption).show(); 251 /*之前曾给html添加过点击selectoption收起的事件啊！！不阻止冒泡的话会发生冲突啊！！问题找了好久啊！！！*/ 252 e.stopPropagation(); 253 }); 254 255 }, 256 hideSelect : function(){ 257 $(this).click(function(){ 258 $(\'.\'+set.selectoption).hide(); 259 }); 260 } 261 }) 262 })(jQuery); 263 264 $(\'.my_select\').newStyle(); 265 $(\'#optionShow\').showSelect(); 266 $(\'#optionHide\').hideSelect(); 267 268 269 270 271 </script> 272 </body> 273 </html>
TIPS：1.如果你想定义一个对象供所有的插件方法可用的话，那么应该定义到上面代码中那样全局的位置；
2.(function($){........})(jQuery);这样写法可以使得外部无法访问到函数内部的公共变量和对象的命名空间；
3.注意可能冲突的事件之间有可能存在事件冒泡的影响！！
4.可以多学习多参考各种各样的代码调试方法，这个真的很重要。
通过一个简单的功能，我学到的东西很多喔，事实证明，冷静的思考，不放弃的探索才是最好的学习办法。