优雅而强大的原生JS消息提示插件 Message.js

在现代的网页设计中，页面消息提示是一个非常重要的功能。无论是在用户操作时给出反馈，还是在系统出错时提示错误信息，优雅而强大的页面消息提示插件都能提供良好的用户体验。

本文将介绍一款名为Message.js的原生JS页面消息提示插件，它具备以下特点：

• 优雅: Message.js采用简洁而优雅的设计风格，以提供良好的视觉效果和用户体验。
• 兼容性良好: Message.js被设计成兼容各种主流浏览器，包括Chrome、Firefox、Safari等，在各种设备上都能正常运行。
• 无任何依赖: Message.js采用原生JS开发，并且不依赖任何第三方库或框架，可直接在项目中使用。

接下来，我们将详细介绍Message.js插件的使用方法和功能特点。让我们一起来探索这款优雅而强大的页面消息提示插件吧！

使用方法

使用Message.js非常简单。首先在html文件中引入相应的css 和js文件

1
2

<link rel="stylesheet" href="./css/message.css">
<script src="./js/message.js"></script>

然后可以通过以下方式调用Message.js来显示消息提示

1
2
3
4
5

<script>
    var configs = {};
    // configs 为配置参数，可省略
    Qmsg.info("这是提示消息",configs);
</script>

默认情况下，Message.js会显示一个信息类型为"info"的提示框，并且会自动关闭。但是我们也可以通过全局配置来改变默认行为。在引入Message.js之前，我们可以通过全局变量QMSG_GLOBALS.DEFAULTS来配置默认参数

1
2
3
4
5
6
7
8

<script>
    window.QMSG_GLOBALS = {
        DEFAULTS:{
            showClose:true,
            timeout:5000
        }
    }
</script>

或者使用Qmsg.config({})来动态修改全局配置

1
2
3
4
5
6

<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

在线DEMO

相关参考链接

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

MDN