jquery消息通知

所属分类： JQ特效 UI 工具提示

查看演示立即下载

插件描述：largemessage是一款方便的消息通知插件

更新时间：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();
},

更新时间：2021-12-13 09:23:44

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>

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery调色板插件(原创)
下一个特效：服务范围可视化编辑(原创)