优化jquery.combox的样式及交互
收藏
优化前：
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]
