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 的设置不知为啥不好用啊,有知道的请指点一下。

    下载

  • 相关阅读:
    SCCM 补丁更新 失误排错一例
    Oracle 远程连接 DB配置 连接命令
    反向代理服务器
    用JMF播放音频 例子
    HTML css兼容
    Java国际化
    JBPM 之介绍,使用
    Nginx内核优化引用
    Nginx 学习
    局域网访问VMware虚拟机中的Ubuntu
  • 原文地址:https://www.cnblogs.com/sun_moon_earth/p/2615625.html
Copyright © 2011-2022 走看看