Contact Icon zydown.com
公告 :加入本站终身vip会员用户,下载本站资源更优惠,我们不断更新中………

当前位置:首页>编程>JavaScript>一款js原生 Message提示插件

一款js原生 Message提示插件

一款优雅的原生JS页面消息Message提示插件,兼容性良好,无任何依赖。

此插件非笔者原创,笔者只做了部分内容的修改,以符合个人需求。以下为原插件来源信息:

原作者:或许吧(jesseqin)
转载地址:https://www.jq22.com/jquery-info23550

一款js原生 Message提示插件

Message提示插件使用

html引入:

<link rel="stylesheet" href="./message.min.css">
<!-- your html -->
<script src="./message.min.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
autoClose Boolean 是否自动关闭 true
timeout Number 自动关闭时,消息的持续显示时间,单位 ms 2000
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()

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
    声明:本站提供的一切软件、教程和内容信息都来自网络收集整理,仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,版权争议与本站无关。用户必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!

    给TA打赏
    共{{data.count}}人
    人已打赏

    相关文章

    JavaScript

    Vue element扩展组件 网站引用

    2024-2-27 10:44:55

    JavaScript

    js保存html文件怎么打开

    2024-3-16 17:41:32

    {{yiyan[0].hitokoto}}
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    有新私信 私信列表
    搜索