标签:style blog color io os ar java sp div
好久没来了,更新下插件,
这个原理就是利用的 input[type=‘hidden‘]和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼
(function($){ //模拟下拉框 $.fn.htmlSelect = function(opt){ if($(this).length==0) return false; var opts = $.extend({ defaultsItem : 0, //默认选中的select项 saveInput : ‘<input type= "hidden" />‘, showSelect : ‘.show‘, callback : function(){} //选择完毕后触发回调 },opt); function SimulateSelect(o){ this.o = o; this.defaultsItem = opts[‘defaultsItem‘]; this.saveInput = opts[‘saveInput‘]; this.callback = opts[‘callback‘]; this.showSelect = this.o.find(opts[‘showSelect‘]); this.hideInp = null; this.selList = this.o.find(‘ul‘); this.curItem = this. defaultsItem; //当前选中 } SimulateSelect.prototype = { init : function(){ var _this = this; _this.creatInput().changeValue().toogleSelList().keyboard(); $(document).on("click", function() { //点击文档空白处 下拉框消失 if(_this.o.hasClass("open")){ _this.closeSelect(_this.o); } }); return this; }, creatInput : function(){ var _this = this; if($.type(_this.saveInput) == "string"){ //判断若参数为jq对象,则直接指向这个input对象,若为字符串,则插入dom this.o.append(_this.saveInput); _this.hideInp = this.o.find(‘input:hidden‘); }else{ _this.hideInp = _this.saveInput } if($.type(_this.defaultsItem) == ‘number‘){ _this.curItem = _this.selList.find(‘li‘).eq(_this.defaultsItem); } return this; }, changeValue : function(){ var _this = this; _this.curItem.addClass(‘selected‘).siblings().removeClass(); var v = _this.curItem.attr(‘date-value‘),s = _this.curItem.html(); _this.showSelect.html(s); _this.hideInp.val(v); return this; }, toogleSelList : function(){ //展开收起列表 var _this = this; this.o.on(‘click‘,function(e){ if($(this).hasClass("open")){ _this.closeSelect($(this)); }else{ $(this).addClass(‘open‘); _this.selList.show(); } var src = e.target,s = ‘‘; if(src.tagName.toLowerCase() == "li"){ s = src.innerHTML; _this.showSelect.html(s); $(src).addClass(‘selected‘).siblings().removeClass(); var v = $(src).attr("date-value"); _this.hideInp.val(v); _this.curItem = $(src); if(_this.callback){ _this.callback(v); } } e.stopPropagation(); }) return this; }, closeSelect : function(obj){ this.selList.hide(); obj.removeClass(‘open‘); return this; }, keyboard : function(){ //注册键盘事件 var _this = this; $(‘body‘).on(‘keydown‘,function(e){ //这块要用body,不然不兼容ie7,8 switch(e.keyCode) { case 38: _this.prevItem(); break; case 40: _this.nextItem(); break; defaults: return; } }) }, prevItem :function(){ var _this = this; if(_this.o.hasClass(‘open‘)){ if(_this.curItem.prev().length > 0){ _this.curItem = _this.curItem.prev(); _this.changeValue(); } } return this; }, nextItem :function(){ var _this = this; if(_this.o.hasClass(‘open‘)){ if(_this.curItem.next().length > 0){ _this.curItem = _this.curItem.next(); _this.changeValue(); } } return this; } } return this.each(function () { var $this = $(this); var obj = new SimulateSelect($this); obj.init() }); } })(jQuery)
css
.select{ position: relative; padding-right: 20px; } .select .ico2{position: absolute; display: block; right: 0; top:10px;cursor: pointer;} .select .show{color:#333333; height: 40px; line-height: 40px; min-width: 80px;*margin-top:-10px; text-align: center; font-size: 14px; display: block;padding-left: 10px; cursor: pointer;} .dropList{ max-height: 510px; overflow: auto; position: absolute; top:40px; width: 100%; left: -1px; background: #FFF; z-index: 99; padding-top: 5px; padding-bottom: 2px; display: none;} .dropList li{ line-height: 30px;margin:0 3px; padding-left: 10px; cursor: pointer;} .dropList li:hover{color:#333;} .dropList li.selected{background: #b9b9b9; color:#FFF;}
调用
$(function(){ $(‘#phone‘).htmlSelect({ callback:function(i){ } //i为当前选中的 data-value的值 }) })
标签:style blog color io os ar java sp div
原文地址:http://www.cnblogs.com/icss/p/4019336.html