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


Posted in jQuery onApril 13, 2017

效果图:

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

图标

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

(function($){
 
 //初始化清除按钮
 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;"></span>');
  
  //清除按钮添加悬停效果。
  clear.unbind("mouseenter.combo mouseleave.combo").bind("mouseenter.combo mouseleave.combo",
  function(event){
   var isEnter = event.type=="mouseenter";
   clear[isEnter ? 'addClass' : 'removeClass']("combo-clear-hover");
  }
  );
  //清除按钮添加点击事件,清除当前选中值及隐藏选择面板。
  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代码

<select id="myselect" panelHeight="auto" style="width: 102px;" editable="true" name="itcast">
 <option value="0">成都</option>
 <option value="1">传智播客</option>
 <option value="2">姚欣</option>
 <option value="3">小星星</option>
</select>

js代码

$('#myselect').combobox({
 required : true,
 editable : false
}).combobox("initClear");

css样式

.combo-clear {
 background-color: #E0ECFF;
 width: 18px;
 height: 20px;
 overflow: hidden;
 display: inline-block;
 vertical-align: top;
 cursor: pointer;
 opacity: 0.6;
 filter: alpha(opacity=60);
 background: url('images/combo_clear.png') no-repeat center center;
}
.combo-clear-hover {
 opacity: 1.0;
 filter: alpha(opacity=100);
 background-color: #eaf2ff;
}

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

jQuery 相关文章推荐
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
jQuery Plupload上传插件的使用
Apr 19 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 #jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 #jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 #jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 #jQuery
jQuery用noConflict代替$的实现方法
Apr 12 #jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 #jQuery
jquery 校验中国身份证号码实例详解
Apr 11 #jQuery
You might like
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
python实现多线程抓取知乎用户
2016/12/12 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
Python异常的检测和处理方法
2018/10/26 Python
Python 支付整合开发包的实现
2019/01/23 Python
如何使用python写截屏小工具
2020/09/29 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
应届毕业生求职信范文
2013/12/18 职场文书
大四学生思想汇报
2014/01/13 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
工程合作意向书范本
2015/05/09 职场文书