textbox icon jquery 插件

本插件可以在输入框的右侧(内部)添加一个可点击的图片按钮,方便进行清空文本框内容以及其它操作。

看图: 

 

 插件代码

 

 1 $.fn.tbIcon = function(options) {

 2var defaults = {
 3         inactiveClass: 'tbIconinactive',
 4         activeClass: 'tbIconactive',
 5         autoHide: false,
 6         onIconClick: false,
 7         iconWidth:22,
 8         title:'Clear'
 9     };
10     var opts = $.extend(defaults, options);
11     return this.each(function() {
12         var txt = $(this);
13         if (!txt.is('input[type=text]')) {
14             return txt;
15         }
16         var zeroPoint = txt.offset().left;
17         var canClick = false;
18         var oraWidth = txt.width();
19         var hasTitle = txt.is('[title]');
20         var oldTitle = '';
21         if(hasTitle) {
22             oldTitle = txt.attr("title");
23         }
24         if(opts.autoHide) {
25             txt.mouseenter(function(e){
26                 txt.width(oraWidth - opts.iconWidth).css("padding-right",opts.iconWidth + "px").addClass(opts.inactiveClass);    
27             });
28         } else {
29                 txt.width(oraWidth - opts.iconWidth).css("padding-right",opts.iconWidth + "px").addClass(opts.inactiveClass);
30         }
31         txt.mousemove(function(e){    
32             if((txt.width() <= (e.pageX - zeroPoint))) {
33                 txt.css("cursor","pointer")
34                     .removeClass(opts.inactiveClass).addClass(opts.activeClass);
35                     txt.attr("title", opts.title);
36                 canClick = true;
37             } else {
38                 txt.css("cursor","")
39                     .removeClass(opts.activeClass).addClass(opts.inactiveClass);
40                 if(hasTitle) {
41                     txt.attr("title", oldTitle);
42                 } else {
43                     txt.removeAttr("title");
44                 }
45                 canClick = false;
46             }
47         }).mouseleave(function(){
48                 canClick = false;
49                 txt.css("cursor","").removeClass(opts.activeClass);
50                 if(hasTitle) {
51                     txt.attr("title", oldTitle);
52                 } else {
53                     txt.removeAttr("title");
54                 }
55                 
56                 if(opts.autoHide) {
57                     txt.width(oraWidth).css("padding-right", "").removeClass(opts.inactiveClass);
58                 } else {
59                     if(!txt.hasClass(opts.inactiveClass)) {
60                         txt.addClass(opts.inactiveClass);
61                     }
62                 }
63         }).click(function(event) {
64             event.stopPropagation();
65             if(canClick) {
66                 if ($.isFunction(defaults.onIconClick)) {
67                     defaults.onIconClick.call(event);
68                 } else {
69                     txt.val("");
70                 }
71             }
72         });
73         return txt;
74     });
75 };

 

 问题:

 IE下 padding-right 的设置不知为啥不好用啊,有知道的请指点一下。

 

下载

 

posted @ 2012-07-30 17:26  轻松  阅读(698)  评论(0编辑  收藏  举报