优化jquery.combox的样式及交互

分享 未结 精帖 1498
宁长空/ty
宁长空/ty VIP3 2018-09-11 18:19:28
收藏
优化前: img[/userfiles/fly/15262631833443e3957a3d0d71c3dec6/files/1536660923481.] [hr] 优化后: img[/userfiles/fly/15262631833443e3957a3d0d71c3dec6/files/1536660953664.] img[/userfiles/fly/15262631833443e3957a3d0d71c3dec6/files/1536660963239.] img[/userfiles/fly/15262631833443e3957a3d0d71c3dec6/files/1536660975778.] [hr] 优化步骤: 1、替代static/plugin/jquery-combox下的jquery.combox.js [pre] (function($){ $.fn.combox = function(options) { var defaults = { borderCss: "combox_border", inputCss: "combox_input", buttonCss: "combox_button", selectCss: "combox_select", datas:[] }; var options = $.extend(defaults, options); var comboxId,comboxName; function _initBorder($border) {//初始化外框CSS $border.css({"border":"1px solid #ccc",'display':'inline-block', 'position':'relative'}).addClass(options.borderCss); $border.children(':text').focus(function(){ $border.css({"border":"1px solid #66afe9",'display':'inline-block', 'position':'relative'}).addClass(options.borderCss); }); $border.children(':text').blur(function(){ $border.css({"border":"1px solid #ccc",'display':'inline-block', 'position':'relative'}).addClass(options.borderCss); }); return $border; } function _initInput($border){//初始化输入框 var bdclass = $border.attr("class") == undefined?"":$border.attr("class"); var value = $border.attr("value")== undefined?"":$border.attr("value"); $border.append('<input type="text" id="'+comboxId+'" name="'+comboxName+'" class="'+options.inputCss+" "+bdclass+'" value="'+value+'"/>'); $border.append('<font id="btn-'+comboxId+'" class="ficomoon icon-angle-bottom '+options.buttonCss+'" style="display:inline-block"></font>'); var labeId = id==""?name:id; $border.append('<br/><label id="'+labeId+'-error" class="error" for="'+labeId+'" style="display: none;"></label>'); //绑定下拉特效 $border.delegate('font', 'click', function() { var value = $border.children(':text').val(); $border.children(':text').val("").focus().val(value); var $ul = $border.children('ul'); if($ul.css('display') == 'none') { $ul.children('li').css('display',''); $ul.slideDown('fast'); $(this).removeClass('icon-angle-bottom').addClass('icon-angle-top'); }else { $ul.slideUp('fast'); $(this).removeClass('icon-angle-top').addClass('icon-angle-bottom'); } }); //输入框值变化 $border.delegate(':text', 'keyup', function() { var $ul = $border.children('ul'); if($ul.css('display') == 'none') { return; } $ul.children('li').each(function() { if($(this).text().indexOf($border.children(':text').val()) >= 0){ $(this).css('display',''); }else{ $(this).css('display','none'); } }); }); //点击combox以外的地方隐藏选择列表 $(document).click(function(e){ //判断点击是否在combox内部 if($(e.target).closest(".combox_border").length > 0){ //点击发生在某个combox内部,过滤掉本combox的选项列表,其他combox选项列表隐藏 var id = $(e.target).closest(".combox_border").children(':text').attr("id"); $(".combox_border").children('ul:not([id="sel-'+id+'"])').slideUp('fast'); $(".combox_border").children('font:not([id="btn-'+id+'"])').removeClass('icon-angle-top').addClass('icon-angle-bottom'); }else{ $(".combox_border").children('ul').slideUp('fast'); $(".combox_border").children('font').removeClass('icon-angle-top').addClass('icon-angle-bottom'); } }); return $border;//IE6需要返回值 } function _initSelect($border) {//初始化下拉列表 $border.append('<ul id="sel-'+comboxId+'" style="" class="'+options.selectCss+'">'); var $ul = $border.children('ul'); $ul.css('top',$border.height()+1); var length = options.datas.length; for(var i=0; i<length ;i++) $ul.append('<li><a href="javascript:void(0)">'+options.datas[i]+'</a></li>'); $ul.delegate('li', 'click', function() { $border.children(':text').val($(this).text()); $border.children(':text').focus(); $border.find("label.error").css("display","none"); $ul.slideUp('fast'); $border.children('font').removeClass('icon-angle-top').addClass('icon-angle-bottom');//确定的时候要将下拉的icon改变 }); return $border; } function _initIdName($border) {//初始化id、name if($border.attr("data-id")){ comboxId = $border.attr("data-id"); }else if($border.attr("id")){ comboxId = $border.attr("id"); }else{ comboxId = guid(); } if($border.attr("data-name")){ comboxName = $border.attr("data-name"); }else if($border.attr("name")){ comboxName = $border.attr("name"); }else{ comboxName = guid(); } return $border; } this.each(function() { var _this = $(this); if(_this.attr("class").indexOf("combox_border") >=0)//防止重复初始化 return; _this = _initIdName(_this);//初始化id、name _this = _initInput(_this);//初始化输入框 _this = _initBorder(_this);//初始化外框CSS _initSelect(_this);//初始化下拉列表 }); function S4() { return (((1+Math.random())*0x10000)|0).toString(16).substring(1); } function guid() { return (S4()+S4()+S4()+S4()+S4()+S4()+S4()+S4()); } }; })(jQuery); [/pre] 2、替代static/plugin/jquery-combox下的style.css [pre] ul{list-style-type:none;margin:0;padding-left:0;} li{margin:0;} @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot?-fl11l'); src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'), url('fonts/icomoon.woff?-fl11l') format('woff'), url('fonts/icomoon.ttf?-fl11l') format('truetype'), url('fonts/icomoon.svg?-fl11l#icomoon') format('svg'); font-weight: normal; font-style: normal; } .ficomoon{font-family:'icomoon';} .icon-angle-top:before {content: "\f102"}.icon-angle-bottom:before {content: "\f103"} .combox_border{ height:38px; background-color: #FFFFFF; background-image: none; border: 1px solid #e5e6e7; border-radius: 1px; color: inherit; display: block; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; } .combox_input{ border:0; line-height:35px; height:35px; padding-left: 12px; width: 100%; vertical-align: middle; padding-right: 40px; } .combox_border:focus { } .combox_button{ width: 28px; text-align: center; vertical-align: middle; cursor: pointer; border-left: 1px solid #c2c2c2; display: inline-block; background-color: #fff; float: right; position: relative; top: -28px; left: -1px; } .combox_select{ border:0; width:100%; background:rgba(255, 255, 255, 1.0) none repeat scroll 0 0 !important; z-index:9999; position:absolute; left:0px; display:none; outline: #66afe9 solid 1px; } .combox_select li{overflow:hidden;height:30px;line-height:30px;cursor:pointer;padding-left: 12px;} .combox_select li:hover {text-decoration: none;background:#f5f5f5} .combox_select a { display: block; line-height: 30px; padding: 0px; text-decoration: none; color: #666; } .combox_select a:hover {text-decoration: none;background:#f5f5f5} .combox_input:focus{ outline: 0px!important; } [/pre] 3、表单中使用jquery.combox [pre] $('#comboxBorder').combox({ datas: ['选项1','选项2','选项3'] }); <span id="comboxBorder" name="combox" class="" value="${testSelect.combox}" style="width:100%;" > </span> [/pre]
回帖
  • 消灭零回复