原生JS消息提示插件
目录
一款优雅的页面消息提示插件,兼容性良好,无任何依赖。
使用
兼容 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
。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 原生JS消息提示插件
码云笔记 » 原生JS消息提示插件