textbox icon jquery 插件
本插件可以在输入框的右侧(内部)添加一个可点击的图片按钮,方便进行清空文本框内容以及其它操作。
看图:
插件代码
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 的设置不知为啥不好用啊,有知道的请指点一下。