JQuery文本框高亮显示插件代码_jquery
程序员文章站
2022-05-24 22:54:52
...
代码如下:
jquery-highlight.js
/*
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代码:
调用方法:
效果如下:
jquery-highlight.js
复制代码 代码如下:
/*
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代码:
复制代码 代码如下:
调用方法:
复制代码 代码如下:
效果如下:
上一篇: 纯php技术交流群,欢迎您的加入
推荐阅读
-
编写自己的jQuery插件简单实现代码_jquery
-
用jquery中插件dialog实现弹框效果实例代码
-
jquery数据验证插件(自制,简单,练手)实例代码
-
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包_jquery
-
jquery属性选择器not has怎么写 行悬停高亮显示
-
jquery的颜色选择插件实例代码_jquery
-
Jquery实现的一种常用高亮效果示例代码_jquery
-
Discuz550代码高亮显示+运行代码框合成插件 下载第1/4页
-
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
-
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】