zoukankan      html  css  js  c++  java
  • 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 的设置不知为啥不好用啊,有知道的请指点一下。

    下载

  • 相关阅读:
    一个python实现重试机制的简要实践
    元编程技术和动态编译
    NDoc使用简要手册增加了例子代码
    问dudu,评论是否只能删除,不可以直接修改?
    《C#类设计手册》读书随笔(4)
    .NET下几种动态生成代码方式比较
    NDoc使用简要手册
    "引用"表示什么?
    .NET环境编程全景不错的书
    C#实现动态灵活调用业务方法的机制
  • 原文地址:https://www.cnblogs.com/sun_moon_earth/p/2615625.html
Copyright © 2011-2022 走看看