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消息通知插件
码云笔记 » jquery largemessage消息通知插件