select 模拟插件
在实际前端开发中，由于select的不稳定性，以及在低版本的IE中的样式不可定性，带来了很大的不方便，因此，开发了这个用列表模拟select的js插件。
[点击下载Demo]
插件js代码：
1 /* 2 author : zhupinglei_zjnb@163.com 3 desc : SelectSimu 4 data : 2012/07/19 5 dependon : jquery-1.7.js 6 */ 7 (function($){ 8 function _SelectSimu(here,options,index){ 9 var _this = this; 10 this.$e = $(here), 11 this.opts = options, 12 this.index = index; 13 this.init(); 14 } 15 _SelectSimu.prototype = { 16 init : function(){ 17 var _this = this; 18 var className = (_this.$e.attr('id') ? '#'+_this.$e.attr('id')+' ' : 0) || (_this.$e.attr('class') ? '.'+_this.$e.attr('class')+' ' : 0); 19 var cssStr = '<style>'+ 20 className + '{position:relative; width:'+_this.opts.width+'px; z-index:'+_this.opts.zIndex+';}'+ 21 className + '.selectInput{position: relative; border:1px solid #ccc; padding:2px; background:#fff; width:100%; font-family: "宋体";}'+ 22 className + '.selectInput span{width:80%; height: 13px; line-height:15px; padding:2px; display: block; overflow: hidden; border:none;}'+ 23 className + '.selectInput i{display:block; position: absolute; right:1px; top:4px; background: url("'+_this.opts.imgSrc+'") center center no-repeat; width:14px; height: 14px;}'+ 24 className + '.selectList{position: absolute; border:1px solid #ccc; width:100%; padding:2px; margin-top:-1px; cursor: default; font-family: "宋体"; background:#fff; display:none;}'+ 25 className + '.selectList ul li{height: 20px; line-height: 20px; padding-left:2px; overflow:hidden;}'+ 26 className + '.selectList ul li:hover{background: #0d7cd7; color:#fff;}'+ 27 className + '.selectList ul li.hover{background: #0d7cd7; color:#fff;}'+ 28 '</style>'; 29 //css插入页面 30 _this.$e.before(cssStr); 31 //html代码导入 32 var selectStr = '<div class="selectInput">'+ 33 '<input type="hidden" name="selectInput" value="'+(_this.opts.listValue[0] ? _this.opts.listValue[0] : "")+'" />'+ 34 '<span>'+(_this.opts.listOption[0] ? _this.opts.listOption[0] : "")+'</span>'+ 35 '<i></i>'+ 36 '</div>'+ 37 '<div class="selectList">'+ 38 '<ul>'; 39 for(var i = 0; i < _this.opts.listNum; i++){ 40 selectStr += '<li value="'+(_this.opts.listValue[i] ? _this.opts.listValue[i] : "")+'">'+ (_this.opts.listOption[i] ? _this.opts.listOption[i] : "")+'</li>' 41 } 42 selectStr += '</ul></div>'; 43 _this.$e.append(selectStr); 44 _this.event(); 45 }, 46 event : function(){ 47 var _this = this; 48 if( $.browser.msie && ($.browser.version == 6.0) ){ 49 _this.$e.find('.selectList li').hover(function(){ 50 $(this).addClass('hover').siblings().removeClass('hover'); 51 },function(){ 52 $(this).removeClass('hover'); 53 }); 54 } 55 _this.$e.on('click','.selectInput',function(e){ 56 e.stopPropagation(); 57 _this.$e.find('.selectList').toggle(); 58 }); 59 $(document).click(function(){ 60 _this.$e.find('.selectList').hide(); 61 }); 62 _this.$e.find('.selectList').on('click','li',function(){ 63 var liValue = $(this).val(), 64 liTxt = $(this).text(); 65 _this.$e.find('.selectInput input').val(liValue); 66 _this.$e.find('.selectInput span').text(liTxt); 67 }); 68 } 69 } 70 $.fn.SelectSimu = function(options){ 71 var opts = $.extend({},$.fn.SelectSimu.defaults,options); 72 return this.each(function(index){ 73 this.SelectSimu = new _SelectSimu(this,opts,index); 74 }); 75 } 76 $.fn.SelectSimu.defaults = { 77 width : 150, 78 zIndex : 0, 79 listNum : 1, 80 listValue : ['0'], 81 listOption : ['请选择'], 82 imgSrc : '' 83 } 84 })(jQuery);
用法：
1 <script type="text/javascript" src="js/jquery-1.7.js"></script> 2 <script type="text/javascript" src="js/SelectSimu.js"></script> 3 <div class="select"></div> 4 <script type="text/javascript"> 5 $('.select').SelectSimu({ 6 width : 150, 7 zIndex : 2, 8 listNum : 4, 9 listValue : ['0','1','2','3'], 10 listOption : ['选择省','浙江','江苏','上海'], 11 imgSrc : 'img/icon_down.png' 12 }); 13 </script>
以上~
