jQuery消息推送插件

所属分类： JQ特效 UI 弹出层

查看演示立即下载

插件描述：借鉴了jq22里各位大佬的插件，加上自己的一些想法开发的一款插件。

更新时间：2021-07-29 23:55:49

更新说明：修改了消息存储与消息存储数量显示位置

更新时间：2021-06-08 00:52:31

消息推送插件请各位大佬品尝。

1.消息存储和消息弹出

1.1.消息存储

初始化消息存储位置

<div class="cen">
    <div href="javascript:void(0);" title="消息" class="height50">
        <div class="smallBell">
 
        </div>
    </div>
</div>

初始化样式

let msgCount = {
    id: ".smallBell",
    leftData: "0"
};
$.initMsgPopup(msgCount);

1.2消息弹出

$.addSmallBellInfo({
            time: "2021-01-01 13:01:20",
            text: `消息0次`,
            type: 0,
            callback: (time, text, index) => { 
            //alert(`你点击的获取的数据是：
            ${time}--${text}`); 
            //alert(`你点击的获取的数据是：${time}--${text}`);
    let obj = {
        title: "消息信息",
        content: text
    };
    $.showPopup(obj, {
        defaultsStyle: "info2-color",
        hideMilliSeconds:100000,
        showLocation:{top:"60px"}
    });
});

2.样式属性

let defaults = {
    defaultsStyle: "error-color",
    //默认样式 当样式为custom-color便可以自定义样式            
    //自定义样式属性              
    border: {
        color: "",
        size: "1px",
        radius: "5px",
    },
    background: {
        color: "",
    },
    //消息弹出位置默认右上角 
    showLocation: {
        top: "0px",
        right: "0px",
        left: "0px",
        bottom: "0px"
    },
    //消息持续显示时间默认5秒 
    hideMilliSeconds: 5000,
};

3.弹出框样式 info-color 默认消息框 info2-color 普通消息框 succeed-color 成功消息框 warning-color 警告消息框 error-color 错误消息框 custom-color 自定义消息框注：如果有什么问题或更好的意见请联系我。

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

上一个特效：图像过度变形效果
下一个特效： jQuery标签选择器