源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JQuery文本框高亮显示插件代码

  • 时间:2021-12-01 13:58 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JQuery文本框高亮显示插件代码
代码如下: jquery-highlight.js
[u]复制代码[/u] 代码如下:
/* 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代码:
[u]复制代码[/u] 代码如下:
<input type="text" id="txtBox" /> <input type="password" id="txtPwd" /> <input type="button" id="btnHighLight" value="highlight" />
调用方法:
[u]复制代码[/u] 代码如下:
<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]http://files.jb51.net/upload/201104/20110402001337864.png[/img]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部