在现代的网页设计中,页面消息提示是一个非常重要的功能。无论是在用户操作时给出反馈,还是在系统出错时提示错误信息,优雅而强大的页面消息提示插件都能提供良好的用户体验。
本文将介绍一款名为Message.js的原生JS页面消息提示插件,它具备以下特点:
- 优雅: Message.js采用简洁而优雅的设计风格,以提供良好的视觉效果和用户体验。
- 兼容性良好: Message.js被设计成兼容各种主流浏览器,包括Chrome、Firefox、Safari等,在各种设备上都能正常运行。
- 无任何依赖: Message.js采用原生JS开发,并且不依赖任何第三方库或框架,可直接在项目中使用。
接下来,我们将详细介绍Message.js插件的使用方法和功能特点。让我们一起来探索这款优雅而强大的页面消息提示插件吧!
使用方法
使用Message.js非常简单。首先在html文件中引入相应的css 和js文件
<link rel="stylesheet" href="./css/message.css">
<script src="./js/message.js"></script>
然后可以通过以下方式调用Message.js来显示消息提示
<script>
var configs = {};
// configs 为配置参数,可省略
Qmsg.info("这是提示消息",configs);
</script>
默认情况下,Message.js会显示一个信息类型为”info”的提示框,并且会自动关闭。但是我们也可以通过全局配置来改变默认行为。在引入Message.js之前,我们可以通过全局变量QMSG_GLOBALS.DEFAULTS来配置默认参数
<script>
window.QMSG_GLOBALS = {
DEFAULTS:{
showClose:true,
timeout:5000
}
}
</script>
或者使用Qmsg.config({})
来动态修改全局配置
<script>
Qmsg.config({
showClose:true,
timeout:5000
});
</script>
以上就是关于使用和配置Message.js的简单介绍。希望这篇文章能够帮助你更好地理解和使用这款消息提示插件。
支持的配置
参数名 | 类型 | 描述 | 默认 |
showClose | Boolean | 是否显示关闭图标 | false |
timeout | Number | 多久后自动关闭,单位ms | 2000 |
autoClose | Boolean | 是否自动关闭 | true |
content | String | 提示的内容 | ” |
onClose | Function | 关闭的回调函数 | null |
html | Boolean | 是否将内容作为html渲染 | false |
maxNums | Number | 最多显示消息(autoClose:true)的数量 | 5 |
哈哈哈不错不错
不错不错
很好的