一款优雅的消息提示插件Message.js

Message.js

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

Git: Gitee | GitHub

插件预览:Message.js


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

  • 原作者:或许吧(jesseqin)

  • 转载地址:https://www.jq22.com/jquery-info23550
    message.js

使用:

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
})

所有支持的配置信息如下:

参数名类型描述默认
showCloseBoolean是否显示关闭图标false
autoCloseBoolean是否自动关闭true
timeoutNumber自动关闭时,消息的持续显示时间,单位 ms2000
contentString提示的消息内容‘’
onCloseFunction关闭时的回调函数null
htmlBoolean是否将内容作为 html 渲染false
maxNumsNumber页面中最多显示消息(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()
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值