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

效果图：

图标

[javascript]  view plain copy

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