漫画原创Jquery消息提示插件
一共有4种提示操作:
1、错误(error)
2、 成功(succ)
3、消息(notice)
4、等待(loading)
每个使用的元素加上以下3种属性
1、class必需为manhuaTip
2、 ty类别必需为第一条的4种之一
3、msg提示的消息
可以灵活设置响应事件和显示时间
插件源代码如下:
$(function() { $.fn.manhuaTip = function(options) { var defaults = { Event : "click", timeOut : 2000 }; var options = $.extend(defaults,options); var $tip = $(this); //文本框绑定事件 $tip.live(options.Event,function(e){ var type = $(this).attr('ty'); var msg = $(this).attr('msg'); var tipHtml = ''; if (type =='loading'){ tipHtml = '<img alt="" src="images/loading.gif">'+(msg ? msg : '正在提交您的请求,请稍候...'); } else if (type =='notice'){ tipHtml = '<span class="gtl_ico_hits"></span>'+msg } else if (type =='error'){ tipHtml = '<span class="gtl_ico_fail"></span>'+msg } else if (type =='succ'){ tipHtml = '<span class="gtl_ico_succ"></span>'+msg } if ($('.msgbox_layer_wrap')) { $('.msgbox_layer_wrap').remove(); } if (st){ clearTimeout(st); } $("body").prepend("<div class='msgbox_layer_wrap'><span id='mode_tips_v2' style='z-index: 10000;' class='msgbox_layer'><span class='gtl_ico_clear'></span>"+tipHtml+"<span class='gtl_end'></span></span></div>"); $(".msgbox_layer_wrap").show(); var st = setTimeout(function (){ $(".msgbox_layer_wrap").hide(); clearTimeout(st); },options.timeOut); }); } });
本文由用户 dengjianbin 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!