jQuery - 消息提示自定义插件
<html><head><title>jQuery - 消息提示自定义插件</title><script type="text/javascript" src="jquery-1.4.4.min.js" ></script><script> $(document).ready(function(){ /** msg:内容 type:消息框类型 iwidth:消息框宽度 iheight:消息框高度 **/ jQuery.showMessage = function(msg, type, iwidth, iheight) { if(iwidth == null) iwidth = 300; if(iheight == null) iheight = 50; /** 得到IE中间位置 **/ var cheight = document.body.clientHeight; var cwidth = document.body.clientWidth; var itop=(cheight-iheight)/2+document.body.scrollTop; var ileft=(cwidth-iwidth)/2+document.body.scrollLeft; /** 错误信息 **/ if(type == "error") $("#Message").css({background:"#ffccdd", border:"1px solid #f67ba4"}); /** 失败信息 **/ else if(type == "fail") $("#Message").css({background:"#f8e4fa", border:"1px solid #f694ff"}); /** 成功信息 **/ else if(type == "success") $("#Message").css({background:"#e7fbe5", border:"1px solid #7dfc70"}); /** 警告信息 **/ else if(type == "warning") $("#Message").css({background:"#f9f6da", border:"1px solid #fce51f"}); /** 提示信息 **/ else if(type == "tip") $("#Message").css({background:"#f2f2f2", border:"1px solid #9d9d9d"}); /** 设置提示框公共样式 **/ $("#Message").css({width: iwidth+"px", height: iheight+"px", "font-size": "12px", top: itop+"px", left: ileft+"px", cursor:"pointer", position: "absolute" }); //设置消息内容 $("#Message").html(msg); /** 效果1 **/ //$("#Message").hide(); //$("#Message").fadeIn(1000); /** 效果2 **/ $("#Message").show(); $("#Message").css({top:(cheight - iheight +"px")}); $("#Message").animate({top:itop+"px", left:ileft+"px"}, 300); /** 点击消息关闭提示事件 **/ $("#Message").click(function(){ $("#Message").fadeOut(); }); } $("#error").click(function(){ $.showMessage("显示错误信息", "error"); }); $("#fail").click(function(){ $.showMessage("显示失败信息", "fail"); }); $("#success").click(function(){ $.showMessage("显示成功信息", "success"); }); $("#warning").click(function(){ $.showMessage("显示警告信息", "warning"); }); $("#tip").click(function(){ $.showMessage("显示提示信息", "tip"); }); });</script></head><body><div id="Message" align="center"></div><input type="button" id="error" value="错误" /><input type="button" id="fail" value="失败" /><input type="button" id="success" value="成功" /><input type="button" id="warning" value="警告" /><input type="button" id="tip" value="提示" /></body></html>