jQuery EasyUI 为Combo,Combobox添加清除值功能的实例

前端之家收集整理的这篇文章主要介绍了jQuery EasyUI 为Combo,Combobox添加清除值功能的实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

效果图:

图标

//初始化清除按钮
function initClear(target){
var jq = $(target);
var opts = jq.data('combo').options;
var combo = jq.data('combo').combo;
var arrow = combo.find('span.combo-arrow');

var clear = arrow.siblings("span.combo-clear");
if(clear.size()==0){
//创建清除按钮。
clear = $('<span class="combo-clear" style="height: 20px;">');

//清除按钮添加悬停效果
clear.unbind("mouseenter.combo mouseleave.combo").bind("mouseenter.combo mouseleave.combo",function(event){
var isEnter = event.type=="mouseenter";
clearisEnter ? 'addClass' : 'removeClass';
}
);
//清除按钮添加点击事件,清除当前选中值及隐藏选择面板。
clear.unbind("click.combo").bind("click.combo",function(){
jq.combo("setValue","").combo("setText","");
jq.combo('hidePanel');
});
arrow.before(clear);
};
var input = combo.find("input.combo-text");
input.outerWidth(input.outerWidth()-clear.outerWidth());

opts.initClear = true;//已进行清除按钮初始化。
}

//扩展easyui combo添加清除当前值。
var oldResize = $.fn.combo.methods.resize;
$.extend($.fn.combo.methods,{
initClear:function(jq){
return jq.each(function(){
initClear(this);
});
},resize:function(jq){
//调用默认combo resize方法
var returnValue = oldResize.apply(this,arguments);
var opts = jq.data("combo").options;
if(opts.initClear){
jq.combo("initClear",jq);
}
return returnValue;
}
});
}(jQuery));

HTML代码

js代码

Box({ required : true,editable : false }).comboBox("initClear");

css样式

以上这篇jQuery EasyUI 为Combo,ComboBox添加清除值功能的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/jquery/40003.html

猜你在找的jQuery相关文章