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

效果图：

 

图标

[javascript]  view plain copy

1. (function($){  
2.       
3.     //初始化清除按钮  
4.     function initClear(target){  
5.         var jq = $(target);  
6.         var opts = jq.data('combo').options;  
7.         var combo = jq.data('combo').combo;  
8.         var arrow = combo.find('span.combo-arrow');  
9.           
10.         var clear = arrow.siblings("span.combo-clear");  
11.         if(clear.size()==0){  
12.             //创建清除按钮。  
13.             clear = $('<span class="combo-clear" style="height: 20px;"></span>');  
14.               
15.             //清除按钮添加悬停效果。  
16.             clear.unbind("mouseenter.combo mouseleave.combo").bind("mouseenter.combo mouseleave.combo",  
17.                 function(event){  
18.                     var isEnter = event.type=="mouseenter";  
19.                     clear[isEnter ? 'addClass' : 'removeClass']("combo-clear-hover");  
20.                 }  
21.             );  
22.             //清除按钮添加点击事件，清除当前选中值及隐藏选择面板。  
23.             clear.unbind("click.combo").bind("click.combo",function(){  
24.                 jq.combo("setValue","").combo("setText","");  
25.                 jq.combo('hidePanel');  
26.             });  
27.             arrow.before(clear);  
28.         };  
29.         var input = combo.find("input.combo-text");  
30.         input.outerWidth(input.outerWidth()-clear.outerWidth());  
31.           
32.         opts.initClear = true;//已进行清除按钮初始化。  
33.     }  
34.       
35.     //扩展easyui combo添加清除当前值。  
36.     var oldResize = $.fn.combo.methods.resize;  
37.     $.extend($.fn.combo.methods,{  
38.         initClear:function(jq){  
39.             return jq.each(function(){  
40.                  initClear(this);  
41.             });  
42.         },  
43.         resize:function(jq){  
44.             //调用默认combo resize方法。  
45.             var returnValue = oldResize.apply(this,arguments);  
46.             var opts = jq.data("combo").options;  
47.             if(opts.initClear){  
48.                 jq.combo("initClear",jq);  
49.             }  
50.             return returnValue;  
51.         }  
52.     });  
53. }(jQuery));  

[html]  view plain copy

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

[javascript]  view plain copy

1. js代码  
2. $('#myselect').combobox({  
3.     required : true,  
4.     editable : false  
5. }).combobox("initClear");  

[css]  view plain copy

1. css样式  
2. .combo-clear {  
3.   background-color: #E0ECFF;  
4.   width: 18px;  
5.   height: 20px;  
6.   overflow: hidden;  
7.   display: inline-block;  
8.   vertical-align: top;  
9.   cursor: pointer;  
10.   opacity: 0.6;  
11.   filter: alpha(opacity=60);  
12.   background: url('images/combo_clear.png') no-repeat center center;  
13. }  
14. .combo-clear-hover {  
15.   opacity: 1.0;  
16.   filter: alpha(opacity=100);  
17.   background-color: #eaf2ff;  
18. }