jQuery消息推送插件

所属分类:UI-工具提示,对话框,弹出层

 13932  62  查看评论 (0)
分享到微信朋友圈
X
jQuery消息推送插件 ie兼容11

更新时间: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 自定义消息框 注:如果有什么问题或更好的意见请联系我。

相关插件-工具提示,对话框,弹出层

仿win10侧边滑出提示框

一款模拟win10的消息提示框toastr
  工具提示
 29452  376

一款腾讯UED设计的提示插件

一款腾讯UED设计的提示插件
  工具提示
 43504  435

jq 提示插件

封装 jq 提示插件 Confirm ,兼容ie811chrome ff
  工具提示
 48040  407

jquery 工具提示插件awTooltip

awTooltip是一个工具提示插件,用css和jQuery插件创建的。 它可以显示工具提示右,左,顶部或底部的元素。 也可以使用彩色工具提示样式。
  工具提示
 32423  312

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复