jQuery消息提醒插件jquery.my-message
jQuery消息提醒插件jquery.my-message
源码介绍
开头引入CSS样式、jquery库和my-message插件，可以自由写入触发按钮的样式：
type="text/css" rel="stylesheet" href="css/jquery.my-message.1.1.css"/>
type="text/javascript" src="js/jquery-1.10.2.js">
type="text/javascript" src="js/jquery.my-message.1.1.js">
#btns{position:absolute;top:40%;width:100%;height:28px;text-align:center;font-size:15px;font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;letter-spacing:1px;}
#btns a{display:inline-block;width:108px;line-height:28px;color:#fff;border-radius:3px;}
#btn1{background-color:#5bc0de;border:1px solid #46b8da;}
#btn2{background-color:#00d46a;border:1px solid #00c161;}
#btn3{background-color:#ff6055;border:1px solid #ff483a;}
#btn4{background-color:#ffc928;border:1px solid #ffc30c;}
body部分很简单，我写了4个a标签作为触发按钮，放在一个固定id的div里面，你也可以直接写button来代替a标签的，跟后面的事件绑定的选择器保持一致就好：
id="btns">
id="btn1">普通消息
id="btn2">成功消息
id="btn3">警告消息
id="btn4">错误消息
底部的调用方式及参数说明：
var message = new MyMessage.message({
/*默认参数，下面为默认项*/
iconFontSize: "20px", //图标大小,默认为20px
messageFontSize: "12px", //信息字体大小,默认为12px
showTime: 3000, //消失时间,默认为3000
align: "center", //显示的位置类型center,right,left
positions: { //放置信息距离周边的距离,默认为10px
top: "10px",
bottom: "10px",
right: "10px",
left: "10px"
},
message: "这是一条消息", //消息内容,默认为"这是一条消息"
type: "normal", //消息的类型，还有success,error,warning等，默认为normal
});
/*两种不同的设置方式*/
message.setting({
align: "bottom" //会覆盖前面的所有设置,可以创建不同的对象去避免覆盖
});
message.setting("showTime", "5000");
$('#btn1').click(function() {
message.add("普通的消息");
});
$('#btn2').click(function() {
message.add("成功的消息", "success");
});
$('#btn3').click(function() {
message.add("警告的消息", "warning");
});
$('#btn4').click(function() {
message.add("错误的消息", "error");
});
/*IE浏览器版本8以下的未必兼容*/