jQuery消息提醒插件jquery.my-message

jQuery消息提醒插件jquery.my-message

jQuery消息提醒插件jquery.my-message

jQuery消息提醒插件jquery.my-message

源码介绍

开头引入CSS样式、jquery库和my-message插件,可以自由写入触发按钮的样式:

<link type="text/css" rel="stylesheet" href="css/jquery.my-message.1.1.css"/> 
<script type="text/javascript" src="js/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="js/jquery.my-message.1.1.js"></script>

               

#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标签的,跟后面的事件绑定的选择器保持一致就好:

<div id="btns"> 
    <a id="btn1">普通消息</a> 
    <a id="btn2">成功消息</a> 
    <a id="btn3">警告消息</a> 
    <a id="btn4">错误消息</a> 
</div>

               

底部的调用方式及参数说明:

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以下的未必兼容*/


分享到 :
简洁的jQuery弹窗插件dialog
上一篇 2018-05-03 12:50:16
html5 svg不规则棱形背景动画特效
2018-05-22 08:58:53 下一篇

发表评论

登录... 后才能评论