jQuery消息提醒插件jquery.my-message(原创)

所属分类:UI-工具提示

 38233  314  查看评论 (4)
分享到微信朋友圈
X
jQuery消息提醒插件jquery.my-message(原创) ie兼容8

jquery.my-message

一个消息提醒的jq插件

浏览器支持:IE8+

html

<button id="btn1">普通的</button>
<button id="btn2">成功的</button>
<button id="btn3">警告的</button>
<button id="btn4">错误的</button>

调用方式及参数说明

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: "center" //会覆盖前面的所有设置,可以创建不同的对象去避免覆盖
});
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");
});
相关插件-工具提示

jquery自动关闭消息通知插件izitoast.js

iziToast.js是一款跨浏览器响应式消息通知插件。该消息通知插件体积小,使用简单。消息显示时带CSS3动画效果,时尚大方。
  工具提示
 36540  449

jquery 工具提示插件awTooltip

awTooltip是一个工具提示插件,用css和jQuery插件创建的。 它可以显示工具提示右,左,顶部或底部的元素。 也可以使用彩色工具提示样式。
  工具提示
 31551  310

Metro风格的jQuery个性化消息提示插件

介绍一款Metro风格的消息提示框插件,插件是基于jQuery的,不仅拥有Metro哪种简单精巧的UI风格,而且兼容性也还不错。之前分享过一些基于jQuery和CSS3的提示框插件,比如HTML5CSS3弹出提示框,感兴趣的朋友也可以前往关注。
  工具提示
 29243  343

按首字母搜索(仿携程)

城市查找按首字母搜索(仿携程)
  工具提示
 38473  435

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    从前的晴天 0
    2018/3/15 14:47:48
    jquery-3.2.1失效
        helloyoucan1
        2019/3/16 10:14:24
        我尝试了一下,如果jquery使用的是 slim 版的话,是不行的,因为这个jquery.my-message内部使用了fadeOut(),该方法在jquery完整版才有的,而 slim 版则是去掉了一些方法,只保留了常用的dom操作的方法。建议使用jquery完整版再试试
    回复
    不言。 0
    2017/6/15 9:28:34

    如果有回调函数就更好了

    回复
    夜子 0
    2017/5/18 12:49:52
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复