标签：style blog http color java os io for
在网上看到了一个写的挺好挺简单的自定义select样式的插件，在理解了它的原理之后，自己也尝试着写了一个。
核心思想：将原来的<select><option></option></select>隐藏掉动态写进页面一个<div>在这里面用<dl><dt><dd>这样的结构代替原来的下拉框。
大概框架：<div class="i_selectbox">//这是用来包裹整个自定义的select框
<div class="i_currentselected"></div>//这是当前默认显示的select框
<div class="i_selectoption"></div> //这是选择是弹出的下拉框
</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 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 /* 下拉选择框 */ 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 /*默认显示框的选择事件*/ 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>
各个浏览器的兼容性还蛮好的喔~~
源插件地址：http://mrthink.net/jquery-select-isimulateselect/
自定义样式的select下拉框,布布扣,bubuko.com
标签：style blog http color java os io for
原文地址：http://www.cnblogs.com/skylar/p/3915367.html
