jQuery EasyUI 为Combo,Combobox添加清除值功能实例
jQuery EasyUI 为Combo,Combobox添加清除值功能实例
发布时间:2017-04-13 来源:查字典编辑
摘要:效果图:图标(function($){//初始化清除按钮functioninitClear(target){varjq=$(target);...

  效果图:

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 = $('');

  //清除按钮添加悬停效果。

  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代码

  成都   传智播客   姚欣   小星星

  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;

  }

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新服务器_操作系统教程学习
热门服务器_操作系统教程学习
电脑子分类