jquery_右下角弹出提示框(jquery_messager)

jquery_message.js

<pre name="code" class="html">(function(){  var ua=navigator.userAgent.toLowerCase();  var is=(ua.match(/\b(chrome|opera|safari|msie|firefox)\b/) || ['','mozilla'])[1];  var r='(?:'+is+'|version)[\\/: ]([\\d.]+)';  var v=(ua.match(new RegExp(r)) ||[])[1];  jQuery.browser.is=is;  jQuery.browser.ver=v;  jQuery.browser[is]=true;  })(); (function (jQuery){/* * jQuery Plugin - Messager * Author: corrieMail: [e-mail]: www.corrie.net.cn * Copyright (c) 2008 corrie.net.cn * @license http://www.gnu.org/licenses/gpl.html [GNU General Public License] * * $Date: 2008-12-26  * $Vesion: 1.4 @ how to use and example: Please Open demo.html */this.version = '@1.3';this.layer = {'width' : 200, 'height': 100};this.title = '信息提示';this.time = 4000;this.anims = {'type' : 'slide', 'speed' : 600};this.timer1 = null;this.inits = function(title, text){if($("#message").is("div")){ return; }$(document.body).prepend('<div id="message" style="border:#b9c9ef 1px solid;z-index:100;width:'+this.layer.width+'px;height:'+this.layer.height+'px;position:absolute; display:none;background:#cfdef4; bottom:0; right:0; overflow:hidden;"><div style="border:1px solid #fff;border-bottom:none;width:100%;height:25px;font-size:12px;overflow:hidden;color:#1f336b;"><span id="message_close" style="float:right;padding:5px 0 5px 0;width:16px;line-height:auto;color:red;font-size:12px;font-weight:bold;text-align:center;cursor:pointer;overflow:hidden;">×</span><div style="padding:5px 0 5px 5px;width:100px;line-height:18px;text-align:left;overflow:hidden;">'+title+'</div><div style="clear:both;"></div></div> <div style="padding-bottom:5px;border:1px solid #fff;border-top:none;width:100%;height:auto;font-size:12px;"><div id="message_content" style="margin:0 5px 0 5px;border:#b9c9ef 1px solid;padding:10px 0 10px 5px;font-size:12px;width:'+(this.layer.width-17)+'px;height:'+(this.layer.height-50)+'px;color:#1f336b;text-align:left;overflow:hidden;">'+text+'</div></div></div>');$("#message_close").click(function(){setTimeout('this.close()', 1);});$("#message").hover(function(){clearTimeout(timer1);timer1 = null;},function(){timer1 = setTimeout('this.close()', time);//alert(timer1);});};this.show = function(title, text, time){if($("#message").is("div")){ return; }if(title==0 || !title)title = this.title;this.inits(title, text);if(time>=0)this.time = time;switch(this.anims.type){case 'slide':$("#message").slideDown(this.anims.speed);break;case 'fade':$("#message").fadeIn(this.anims.speed);break;case 'show':$("#message").show(this.anims.speed);break;default:$("#message").slideDown(this.anims.speed);break;}if($.browser.is=='chrome'){setTimeout(function(){$("#message").remove();this.inits(title, text);$("#message").css("display","block");},this.anims.speed-(this.anims.speed/5));}//$("#message").slideDown('slow');this.rmmessage(this.time);};this.lays = function(width, height){if($("#message").is("div")){ return; }if(width!=0 && width)this.layer.width = width;if(height!=0 && height)this.layer.height = height;}this.anim = function(type,speed){if($("#message").is("div")){ return; }if(type!=0 && type)this.anims.type = type;if(speed!=0 && speed){switch(speed){case 'slow' : ;break;case 'fast' : this.anims.speed = 200; break;case 'normal' : this.anims.speed = 400; break;default:this.anims.speed = speed;}}}this.rmmessage = function(time){if(time>0){timer1 = setTimeout('this.close()', time);//setTimeout('$("#message").remove()', time+1000);}};this.close = function(){switch(this.anims.type){case 'slide':$("#message").slideUp(this.anims.speed);break;case 'fade':$("#message").fadeOut(this.anims.speed);break;case 'show':$("#message").hide(this.anims.speed);break;default:$("#message").slideUp(this.anims.speed);break;};setTimeout('$("#message").remove();', this.anims.speed);this.original();}this.original = function(){this.layer = {'width' : 200, 'height': 100};this.title = '信息提示';this.time = 4000;this.anims = {'type' : 'slide', 'speed' : 600};};    jQuery.messager = this;    return jQuery;})(jQuery);

index.html测试的html

<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="jquery-1.8.2.min.js"></script><script src="jquery.messager.js"></script><script>$(document).ready(function(){$.messager.show(0,'送你一个Jquery Messager消息弹出插件！');$("#showMessager300x200").click(function(){$.messager.lays(300, 200);$.messager.show(0, '300x200的消息');});$("#showMessagerFadeIn").click(function(){$.messager.anim('fade', 2000);$.messager.show(0, 'fadeIn动画消息');});$("#showMessagerShow").click(function(){$.messager.anim('show', 1000);$.messager.show(0, 'show动画消息');});$("#showMessagerajax").click(function(){$.messager.anim('show', 1000);$.messager.show('源码爱好者', '使用“jquery”作标题');});$("#showMessagerDim").click(function(){$.messager.show('<font color=red>自定义标题</font>', '<font color=green style="font-size:14px;font-weight:bold;">自定义内容</font>');});$("#showMessagerSec").click(function(){$.messager.show(0, '一秒钟关闭消息', 1000);});$("#showMessagerNoClose").click(function(){$.messager.show('不会关闭的消息', '要自己点关闭的X才可以哦！', 0);});});</script><style type="text/css"><!--body,td,th { font-size: 12px; }body { background-color: #fefefe; }p{ width:80%; height:auto; padding:10px; background-color:#D6F097; border:solid 1px #FF9900; color:#333; margin-left:auto; margin-right:auto;}input{ background-color:#F5D99E; color:#333; border:solid 1px #993300; font-size:12px;}p.new input{ background-color:#FF0000; color:#fff;}--></style></head><body>1、可以设置不自动关闭，停留在固定位置。<br />2、增加了对UA的判断能力和效果解析<br />3、针对chrome下的错位给予了一定的修补，目前效果还算可以<br />4、针对代码段做了调整优化<br /></p><p><input type="button" id="showMessager300x200" value="显示一个300x200的消息" /></p><p><input type="button" id="showMessagerFadeIn" value="显示一个fadeIn动画消息" /></p><p><input type="button" id="showMessagerShow" value="显示一个show动画消息" /></p><p><input type="button" id="showMessagerajax" value="显示一个show动画消息，不含html" /></p><p><input type="button" id="showMessagerDim" value="显示定义内容和标题消息" /></p><p><input type="button" id="showMessagerSec" value="一秒钟关闭消息" /></p><p class="new"><input type="button" id="showMessagerNoClose" value="不自动关闭消息" /></p><br /></body></html>