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

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

本文将介绍一款名为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的简单介绍。希望这篇文章能够帮助你更好地理解和使用这款消息提示插件。

支持的配置

参数名类型描述默认
showCloseBoolean是否显示关闭图标false
timeoutNumber多久后自动关闭,单位ms2000
autoCloseBoolean是否自动关闭true
contentString提示的内容
onCloseFunction关闭的回调函数null
htmlBoolean是否将内容作为html渲染false
maxNumsNumber最多显示消息(autoClose:true)的数量5

在线DEMO

相关参考链接

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

MDN

下载权限
查看
  • 免费下载
    评论并刷新后下载
    登录后下载
  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余

给TA给糖
共{{data.count}}人
人已给糖
经验分享

【Minecraft】1.20.1开服教程

2024-1-27 22:54:35

站长笔记经验分享

辞职!!!拒绝精神内耗

2024-3-2 10:01:25

3 条回复 A文章作者 M管理员
  1. 倦意

    哈哈哈不错不错

  2. 七七猫

    很好的

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索