动态醒目提示插件jquery.pulsate的自定义改造
来源:互联网 发布:iphonex京剧变脸软件 编辑:程序博客网 时间:2024/04/29 18:38
1、页面引用 基础jquery库jquery.js
2、直接在jquery.pulsate.min.js文件中追加自定义内容,页面引用jquery.pulsate.min.js文件。
后面的三个方法是加的,前面的经过压缩的是插件原来的内容。
(function(c){var j={init:function(a){var b={color:c(this).css("background-color"),reach:20,speed:1E3,pause:0,glow:!0,repeat:!0,onHover:!1};c(this).css({"-moz-outline-radius":c(this).css("border-top-left-radius"),"-webkit-outline-radius":c(this).css("border-top-left-radius"),"outline-radius":c(this).css("border-top-left-radius")});a&&c.extend(b,a);b.color=c("<div style='background:"+b.color+"'></div>").css("background-color");!0!==b.repeat&&(!isNaN(b.repeat)&&0<b.repeat)&&(b.repeat-=1);return this.each(function(){b.onHover?c(this).bind("mouseover",function(){g(b,this,0)}).bind("mouseout",function(){c(this).pulsate("destroy")}):g(b,this,0)})},destroy:function(){return this.each(function(){clearTimeout(this.timer);c(this).css("outline",0)})}},g=function(a,b,d){var f=a.reach;d=d>f?0:d;var h=(f-d)/f,e=a.color.split(","),h="rgba("+e[0].split("(")[1]+","+e[1]+","+e[2].split(")")[0]+","+h+")",e={outline:"2px solid "+h};a.glow?(e["box-shadow"]="0px 0px "+parseInt(d/1.5)+"px "+h,userAgent=navigator.userAgent||"",/(chrome)[ \/]([\w.]+)/.test(userAgent.toLowerCase())&&(e["outline-offset"]=d+"px",e["outline-radius"]="100 px")):e["outline-offset"]=d+"px";c(b).css(e);b.timer=setTimeout(function(){if(d>=f&&!a.repeat)return c(b).pulsate("destroy"),!1;if(d>=f&&!0!==a.repeat&&!isNaN(a.repeat)&&0<a.repeat)a.repeat-=1;else if(a.pause&&d>=f){var e=d+1;innerfunc=function(){g(a,b,e)};setTimeout(innerfunc,a.pause);return!1}g(a,b,d+1)},a.speed/f)};c.fn.pulsate=function(a){if(j[a])return j[a].apply(this,Array.prototype.slice.call(arguments,1));if("object"===typeof a||!a)return j.init.apply(this,arguments); c.error("Method " + a + " does not exist on jQuery.pulsate")}})(jQuery);var blackSelectForYcfNotify = function (s, c, ms) { if (c > 0) { $(s).css("color", "black"); c--; setTimeout(function () { redSelectForYcfNotify(s, c, ms); }, ms); }};var redSelectForYcfNotify = function (s, c, ms) { if (c > 0) { $(s).css("color", "red"); c--; setTimeout(function () { blackSelectForYcfNotify(s, c, ms); }, ms); }};var pulsateForYcfNotify = function (s) { $(s).each(function (i, ele) { var objTagName = ele.tagName.toLocaleLowerCase(); if (i == 0) $(ele).focus(); switch (objTagName) { case 'input': case 'a': case 'span': case 'div': { $(ele).pulsate({ color: "#DC271D", reach: 20, repeat: 6, speed: 1000, glow: true }); } break; case 'select': { var tds = "#s2id_" + ele.id; console.log(tds); if ($(tds).length > 0) { var ts = tds + " a span:first"; redSelectForYcfNotify(ts, 12, 500); } else { redSelectForYcfNotify(ele, 12, 500); } } break; } });}
3、调用方法进行页面动态提醒
比如下拉框文字闪烁:
下拉框元素id为selectProduct,则可以调用 pulsateForYcfNotify(“#selectProduct”);
因为封装好的方法是支持多元素的,所以,你可以传入多个元素,如:pulsateForYcfNotify(“#selectProduct,#selectUserId”);等,就是jquery选择器语法。
input文本框边框闪烁:
pulsateForYcfNotify(“#txtId1,#txtId2”);
使用非常简单吧,当然 ,你可以根据这个进行扩展,改成你自己喜欢的提醒样式完全是可以的,无非就是改变页面元素的外貌,使用各种醒目的颜色吸引眼球等等。
需要注意的是,为了方便调用,这里的javascript函数都是全局函数,当然得想一个独一无二的名称来防止函数名与其他函数冲突。
效果:
0 1
- 动态醒目提示插件jquery.pulsate的自定义改造
- 改造的JQUERY 延迟加载插件
- jQuery插件支持AMD的写法改造
- jquery select2插件 改造
- jQuery validate 动态修改自定义验证方法的提示消息
- 深度改造的基于JQuery的Flexigrid插件
- 基于jQuery的FlexiGrid的插件使用和改造
- 外框醒目提示
- 流行的jquery 提示插件
- jquery的输入提示插件
- jQuery的提示插件jQuery Impromptu
- Jquery的提示插件 jquery.poshytip.js
- 自定义jQuery插件的写法
- jQuery Validation Plugin 1.11.1 插件自定义错误信息提示位置
- jQuery插件flexigrid改造……
- jquery插件jquery.autocomplete.js的中文化、json化改造
- 自定义插件 (KSImageNamed) 的代码提示
- 一个Jquery的提示(tooltip)插件Jtip
- 区块链开发(四)Nodejs下载&安装
- Javascript 严格模式详解
- plupload组件结合struts2完成上传
- NodeJS基础item2—NodeJS下载安装
- VMware虚拟机中CentOS/redhat设置固定IP
- 动态醒目提示插件jquery.pulsate的自定义改造
- Linux java进程CPU占用率高
- URAL - 2102 Michael and Cryptography 分解质因数+优化
- 家长选择国际学校都关注哪些因素
- or常用命令
- 洛谷 P1434 滑雪
- 可执行文件(ELF)格式的理解
- bootstrap——组件(九、其他)
- 统一登录总结