Greasy Fork is available in English.

Message

一款优雅的原生JS页面消息提示插件，兼容性良好，无任何依赖。 An elegant native JS page message prompt plug-in, good compatibility, no dependency.

Ce script ne doit pas être installé directement. C'est une librairie destinée à être incluse dans d'autres scripts avec la méta-directive // @require https://update.greasyfork.org/scripts/462234/1322684/Message.js

Auteur
WhiteSevs
Version
0.0.1.20240204081854
Créé
21/03/2023
Mis à jour
04/02/2024
Licence
N/A

Message.js

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

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

  • 原作者：或许吧（jesseqin）

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

message.js

使用：

目前是把CSS集成到JS文件中了。

html引入：

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

油猴引入

// @require https://github.com/WhiteSevs/Message.js/raw/master/src/message.js

全局配置

在引入message.js之前可以通过全局变量 QMSG_GLOBALS.DEFAULTS 来进行配置

window.QMSG_GLOBALS = {
    DEFAULTS: {
        showClose:true,
        timeout: 5000
    }
}

或者通过Qmsg.config({})来动态修改全局配置(建议用这个):

Qmsg.config({
    showClose:true,
    timeout: 5000
})

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

参数名 类型 描述 默认
animation Boolean 是否使用弹出动画 true
autoClose Boolean 是否自动关闭 true
content Number 提示的消息内容 空
html String 是否将内容作为 html 渲染 false
position Function 弹出位置 topleft、top、topright、left、center、right、bottomleft、bottom、bottomright，不区分大小写 top
maxNums Number 页面中最多显示消息(autoClose: true)的数量 5
onClose Function 关闭时的回调函数 null
showClose Boolean 是否显示关闭图标 false
showIcon Boolean 是否显示左边的图标 true
showMoreContent Boolean 是否显示更多内容(换行) false
showReverse Boolean 是否使弹出方式逆反 false
timeout Number 自动关闭时，消息的持续显示时间，单位 ms 2500
type String 弹出类型 info

Qmsg支持的方法

Qmsg.config() // 配置
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()

setText(text:String)

对已弹出的内容进行修改

aMsg.setText("这是进行修改的info消息")

setHTML(html:String)

对已弹出的内容进行修改

aMsg.setHTML("<a href='javascript:;' target='_blank'>这是进行修改的info消息超链接</a>")

关闭左边的图标显示

Qmsg.config({
    showIcon: false
})
Qmsg.info("这个没有图标")
// 或者
Qmsg.info("这个没有图标",{
    showIcon: false
})

设置九宫格位置弹出

Qmsg.info("左上角",{
    position: "topleft"
})

Qmsg.info("顶部",{
    position: "top"
})

Qmsg.info("右上角",{
    position: "topright"
})

Qmsg.info("左边",{
    position: "left"
})

Qmsg.info("中间",{
    position: "center"
})

Qmsg.info("右边",{
    position: "right"
})

Qmsg.info("左下角",{
    position: "bottomleft"
})

Qmsg.info("底部",{
    position: "bottom"
})

Qmsg.info("右下角",{
    position: "bottomright"
})