JQuery 文本框高亮显示插件 - TOMMYHU - 专注互联网开发及运营技术,提供相关资料及软件下载,奇趣网络时事评论!
May 26

JQuery 文本框高亮显示插件 不指定

JQuery 中没有这个方法,自己今天写了一个Plugin,把代码贴出来分享一下;
Highslide JS
代码如下:

jquery-highlight.js
view sourceprint?
/*
    description:TextBox HighLight
    author:Allen Liu
*/
(function($) {
    $.fn.highlight = function(options) {
        var defaultOpt = {
            lightColor: 'yellow',   /* 高亮时的颜色 */
            lightTime: 1000,        /* 高亮时长 (单位:毫秒) */
            isFocus: true           /* 是否获取焦点 */
        };

        options = $.extend(defaultOpt, options);
        return this.each(function() {
            var sender = $(this);
            if (sender.attr('light') == undefined) {
                var _bgColor = sender.css('background-color');
                sender.css({ 'background-color': options.lightColor });
                if (options.isFocus) {
                    sender.focus();
                }

                sender.attr('light', true);
                window.setTimeout(function() {
                    sender.removeAttr('light');
                    sender.css({ 'background-color': _bgColor });
                }, options.lightTime);
            }
        });
    }
})(jQuery);


Html代码:
<input type="text" id="txtBox" />
<input type="password" id="txtPwd" />
<input type="button" id="btnHighLight" value="highlight" />

调用方法:
<script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-highlight.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnHighLight').click(function() {
$('#txtBox').highlight({lightColor:'red', lightTime: 1000 });
$('#txtPwd').highlight({ lightTime: 1000 });
});
});
</script>
效果如下:
[img][attach]2527[/attach][/img]

原文出处:http://www.cnblogs.com/liulikui/archive/2011/04/01/JQuery-Plugin.html
  • 中查看更多“JQuery 文本框高亮显示插件”相关内容
  • 中查看更多“JQuery 文本框高亮显示插件”相关内容
  • 中查看更多“JQuery 文本框高亮显示插件”相关内容
  • 中查看更多“JQuery 文本框高亮显示插件”相关内容
  • 互联网开发网友 Email Homepage
    2012/04/03 04:02
    累了又有什么用呢最要紧的是找到了这么好的帖子是第一位
    互联网开发网友 Email Homepage
    2011/05/28 10:27
    又是代码···真看不懂,看来要认真学习学习了
    Pages: 1/1 First page 1 Final page
    Add a comment

    Nickname

    emotemotemotemotemotemotemotemotemotemotemotemotemotemotemotemot