原生JS消息提示插件Message.js(原创)

所属分类:UI-弹出层,工具提示,对话框

 7134  69  查看评论 (4)
分享到微信朋友圈
X
原生JS消息提示插件Message.js(原创) ie兼容9

更新时间:2020-12-09 22:35:02

更新说明:新增消息位置,html支持,消息计数上线为99等。


更新时间:2020-12-08 00:14:24

Qmsg 消息提示插件

使用

兼容IE>=9。

html

<link rel="stylesheet" href="./css/message.css">
<!-- your html -->
<script src="./js/message.js"></script>
<script>
    var configs = {};
    // configs 为配置参数,可省略
    Qmsg.info("这是提示消息",configs);
</script>

全局配置

在引入message.js之前可以通过全局变量 QMSG_GLOBALS.DEFAULTS 来进行配置

window.QMSG_GLOBALS = {
    DEFAULTS:{
        showClose:true,
        timeout:5000
    }
}

或者通过`Qmsg.config({})`来动态修改全局配置:

Qmsg.config({
    showClose:true,
    timeout:5000
})

所有支持的配置信息如下:

参数名
类型
描述
默认
showClose
Boolean
是否显示关闭图标
false
timeout
Number
多久后自动关闭,单位ms
2000
autoClose
Boolean
是否自动关闭
true
content
String
提示的内容
''
onClose
Function
关闭的回调函数
null
html
Boolean
是否将内容作为html渲染
false
maxNums
Number
最多显示消息(autoClose:true)的数量
5

Qmsg支持的方法

Qmsg.info()
Qmsg.warning()
Qmsg.error()
Qmsg.success()
Qmsg.loading()

以上方法均可传递1-2个参数,如下:

Qmsg.loading("我是加载条");
Qmsg.info("给你个眼神,你懂得",{
    showClose:true,
    onClose:function(){
        console.log('我懂了')
    }
})
Qmsg.error({
    content:"1+1=3",
    timeout:5000
})

注意:`Qmsg.loading()`默认修改`autoClose=false`,一般来说需要手动关闭:

var loadingMsg = Qmsg.loading('我是加载条');
//do something
loadingMsg.close();

如需要自动关闭则需要如下调用:

Qmsg.loading("我是加载条",{
    autoClose:true
})
//或者
Qmsg.loading({
    autoClose:true,
    content:"我是加载条"
})

Qmsg.closeAll()

关闭所有消息,包括`autoClose=false`的消息

消息实例支持的方法和属性

var aMsg = Qmsg.info("这是个info消息")

close()

关闭当前消息,会触发`onClose`回调函数。

aMsg.close()

destroy()

销毁消息,不会触发`onClose`回调函数。

aMsg.destroy()

timeout

多久后关闭,单位ms,设置该值可动态修改该消息实例的关闭时间,前提是该消息实例的`autoClose==true`。

相关插件-弹出层,工具提示,对话框

特别实用、调用简单的弹出层

特别实用、调用简单的弹出层。完全可以用样式控制,可以兼容的不同选择相应的效果
  弹出层
 35468  300

jQuery弹框、弹出层插件method.js

jq弹框 弹框标题、内容、宽高、取消确认按钮、关闭按钮、动效类型均可以参数的形式设置
  弹出层
 45156  357

悬浮九宫格菜单jQuery插件

悬浮九宫格菜单jQuery插件
  弹出层
 41992  402

jQuery制作侧边悬浮折叠影藏弹窗特效

jQuery制作侧边悬浮折叠影藏弹窗特效
  弹出层
 33537  367

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

    丶July_7 0
    2021/1/5 17:44:57
    请问怎样更改图标 回复
          0
    2020/12/13 18:47:11
    有没有源码参考一下
        或许吧0
        2020/12/14 23:06:38
        下载后找到message.js即是源码。😀
    回复
    月下孤草 0
    2020/12/9 22:38:47

    很好用,强大!

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复