jquery largemessage消息通知插件

largemessage 是一款方便的消息通知插件。

代码 记得引入必要文件，模块所使用图标已经内置，更多配置信息查看 message.js。

图标来源于 fontawesome。

let MESSAGE = function(opt) {
    this.title = opt.title || '提示'; //标题
    this.content = opt.content || false; //内容 如果内容为空则只显示标题
    this.position = opt.position || 'center'; //位置 目前只有居中和右
    this.closeable = opt.closeable || false; //是否显示关闭按钮
    this.type = opt.type || 'info'; //类型  success info warning error
    this.duration = opt.duration || 5; //倒计时关闭
    this.autoclose = opt.autoclose == false ? false : opt.autoclose || true; //是否自动关闭
};
<script >
    layui.config({
        base: 'module/',
        version: new Date().getTime()
    }).extend({
        message: 'message/message'
    }).use(['message'], function() {
        console.log(layui.message);
        let msg = layui.message;
        msg.success({
            content: '如果感觉体验良好请给一个免费的 star 可以吗',
            closeable: true,
            autoclose: false,
            title: '感谢支持'
        });
        layui.util.event('on-event', {
            cSuccess: function(othis) {
                msg.success({
                    content: '一个成功的提示不会自动关闭',
                    closeable: true,
                    autoclose: false,
                    title: '操作成功'
                });
            },
            cerror: function(othis) {
                msg.error({
                    content: '一个失败的提示不会自动关闭',
                    closeable: true,
                    autoclose: false
                });
            },
            cinfo: function(othis) {
                msg.info({
                    content: '一个提示不会自动关闭',
                    closeable: true,
                    autoclose: false
                });
            },
            cwarning: function(othis) {
                msg.warning({
                    content: '一个警告的提示不会自动关闭',
                    closeable: true,
                    autoclose: false,
                    title: '警告'
                });
            },
            rinfo: function(othis) {
                msg.info({
                    content: '一个成功的提示不会自动关闭',
                    closeable: true,
                    autoclose: false,
                    title: '右侧提示',
                    position: 'right'
                });
            },
            rsuccess: function(othis) {
                msg.success({
                    content: '一个成功的提示会自动关闭',
                    closeable: true,
                    title: '成功',
                    position: 'right'
                });
            },
            rtitle: function(othis) {
                msg.info({
                    title: '我只有标题',
                    closeable: true,
                    position: 'right',
                    autoclose: false
                });
            }
        });
    })
</script>

更新时间：2021-12-14 23:07:33

更新说明：

1. 原来的关闭通知最终实现的是display:none 本次更新关闭通知时移除 remove 元素

2. 新增 modal 对话框支持如：遮罩，取消/确认回调,自定义按钮名称,单标题无内容，自定义标题等操作。

3. modal 内置函数如下：

info, success, warning, error, question
 
modalInfo: function(opt) {
    opt.modal == true;
    opt.type = 'info';
    new MESSAGE(opt).render();
}, modalSuccess: function(opt) {
    opt.type = 'success';
    opt.modal = true;
    new MESSAGE(opt).render();
}, modalWarning: function(opt) {
    opt.type = 'warning';
    opt.modal = true;
    new MESSAGE(opt).render();
}, modalError: function(opt) {
    opt.type = 'error';
    opt.modal = true;
    new MESSAGE(opt).render();
}, modalQuestion: function(opt) {
    opt.type = 'question';
    opt.modal = true;
    new MESSAGE(opt).render();
},

以上关于jquery largemessage消息通知插件的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。