jquery largemessage消息通知插件

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();
},

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » jquery largemessage消息通知插件

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们