优化插件中心的的notice通知控件

分享 未结 8 1060
Thans
Thans VIP3 2018-9-17
悬赏:20飞吻
原作者地址: https://fly.layui.com/extend/notice/#download

效果图:


优化项:
1、优化显示位置,改到右侧。
2、可以同时显示多条通知
3、css代码初始化载入,不独立文件。

css部分,pre标签显示有问题,请看评论部分。
代码如下:
// 参数名 必传  备注
// type NO 主题类型,可选warm,danger,custom,default,默认default
// calssName NO 类型为custom时,自定义样式Class名称
// title NO notice内容
// icon NO 图标,支持所有layui内置图标
// align NO 内容显示位置,可选left,right,center。默认居中center
// autoClose NO 开启自动移除,默认true
// time NO 自动移除时间,默认3000
// click NO 是否允许点击移除,默认true
// end NO 生成完成回调函数
//改自:https://gitee.com/myttyy/layuinotice
var NOTICEINDEX = 0;
layui.define(['jquery'], function(exports) {
var $ = layui.jquery;
var cssStyle = $('style type="text/css">.notices-group{position: fixed;right: 0px;top: 0;z-index: 9999999;}.layui-notice{width:300px;right: 10px;z-index: 9999;position: relative;}.layui-notice-right{margin-left: 0px;margin-right: 15px;}.notice {position: relative;margin-bottom: 1.5rem;color: #fff;padding: .75rem 1.25rem;top: 5vh;}.notice i {margin-right: 5px;}.notice a {color: rgb0 && $('head link:last').after(cssStyle) || $('head').append(cssStyle);
var noticeObj = {
default: {
type: "",
calssName: "",
title: "This is a notice",
radius: "",
icon: "",
style: "",
align: "",
autoClose: true,
time: 3000,
click: true,
end: null
},
init: function($data) {
var options = $.extend(this.default, $data);
var _classN = "layui-bg-blue";
switch (options.type) {
case 'warm':
_classN = "layui-bg-yellow";
break;
case 'danger':
_classN = "layui-bg-red";
break;
case 'custom':
_classN = options.calssName;
break;
default:

break;
};
if(!$('.notices-group').length){
$("body").append('<div class="notices-group"></div>');
}
var noticeObjHtml = '<div class="layui-container layui-anim layui-anim-up layui-notice"><div class="notice ' + _classN + ' has-radius">';

var noticeClass = 'layui-notice-' + NOTICEINDEX;

switch (options.align) {
case 'left':
noticeObjHtml += '<p class="' + noticeClass + '">';
break;
case 'right':
noticeObjHtml += '<p class="text-right ' + noticeClass + '">';
break;
default:
noticeObjHtml += '<p class="text-center ' + noticeClass + '">';
break;
};

if (options.icon) {
noticeObjHtml += ' <i class="layui-icon ' + options.icon + '"></i>';
}
noticeObjHtml += options.title;
if (options.click) {
noticeObjHtml +=
'</p><a href="javascript:;" class="pull-right"><i class="layui-icon layui-icon-close notice-close"></i></a>';
}
// 结束
noticeObjHtml += '</div></div>';
$(".notices-group").append(noticeObjHtml);

if (options.autoClose) {
window.setTimeout(function() {
$("." + noticeClass).parents(".layui-notice").addClass("layui-anim-fadeout").remove();
}, options.time);
}

if (options.click) {
$(".notice-close").click(function() {
$(this).parents(".layui-notice").addClass("layui-anim-fadeout").remove();
});
}

this.end = function(callback) {
callback();
};
NOTICEINDEX++;
},
close: function() {
var noticeClass = 'layui-notice-' + NOTICEINDEX;
$("." + noticeClass).parents(".layui-notice").addClass("layui-anim-fadeout").remove();
},
closeAll: function() {
$(".notice-close").parents(".layui-notice").addClass("layui-anim-fadeout").remove();
}
};
exports('notice', noticeObj);
});
回帖
  • Thans
    2018-9-17
    css部分代码,显示有问题
    0 回复
  • Thans
    2018-9-17
    CSS如下:
    var cssStyle = $('<style type="text/css">.notices-group{position: fixed;right: 0px;top: 0;z-index: 9999999;}.layui-notice{width:300px;right: 10px;z-index: 9999;position: relative;}.layui-notice-right{margin-left: 0px;margin-right: 15px;}.notice {position: relative;margin-bottom: 1.5rem;color: #fff;padding: .75rem 1.25rem;top: 5vh;}.notice i {margin-right: 5px;}.notice a {color: rgba(255, 255, 255, 0.8);}.notice a:hover {color: white;}.notice .has-border {border: 1px solid #ecedf2 !important;}.notice .text-left {text-align: left;}.notice .text-right {text-align: right;}.notice .text-center {text-align: center;}.notice .pull-left {float: left;}.notice .pull-right {position: absolute;top: 10%;right:0;}.has-radius {border-radius: 5px !important;}.layui-bg-green2 {background-color: #52c41a !important;}.layui-bg-yellow {background-color: #FFB800 !important;}.layui-bg-grey {background-color: #768093 !important;}</style>');
    0 回复
  • [嘻嘻] [嘻嘻] [嘻嘻]
    0 回复
  • 为什么靠右显示啊?没get到点,是不是应该加一个显示位置的功能
    0 回复
  • Thans
    2018-9-19
    @layui小小 嗯 暂时没有其他的需要 回头可以加下
    0 回复
  • @Thans 没有哦,因为我试了一下 ,显示在右边 ,感觉有点别扭
    0 回复
  • 还有我打算用这个在手机端做提示用
    0 回复
  • ThankGod
    2018-11-21
    @Thans 你用这个能走end回调吗?
    0 回复