插件描述：一款优雅的页面消息提示插件，兼容性良好，无任何依赖。
更新时间：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`。
PREVIOUS:
NEXT:
相关插件-弹出层,工具提示,对话框
flavr―超级漂亮的jQuery扁平弹出对话框
flavr是一个时尚的扁平弹出对话框为您的下一个网站。flavr是响应设计布局，能够适应任何屏幕大小。得到最好的用户体验,使用流行的animate.css动画，最重要的是,flavr可以运行在任何新的浏览器IE8(+),任何设备和屏幕大小。
弹出层
讨论这个项目（10）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
章帅杰 0
2022/12/19 12:12:49
-
👍不错，有前途的额插件。建议优化一下代码，缩减文件大小
ps：好像不能设置底部弹出
章帅杰0
2022/12/19 12:27:21
-
在移动端一般都遵循从底部弹出消息。
章帅杰0
2022/12/19 12:28:24
-
长消息不支持换行！不能全部展示出来
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
