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实现图片平滑滚动详解
Mar 22 jQuery
jquery实现图片轮播器
May 23 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery实现简单QQ聊天框
Aug 27 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
圣诞节红领巾广播稿
2014/02/03 职场文书
平安工地建设方案
2014/05/06 职场文书
关于美容院的活动方案
2014/08/14 职场文书
普通党员对照检查材料
2014/08/28 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript
python图片灰度化处理的几种方法
2021/06/23 Python