说明: spop.js是纯js toast消息通知插件。 使用spop.js插件,可以在网页上快速创建漂亮的toast消息效果
小型泵
与轻量级弹出通知插件无关,使用此JavaScript插件可以轻松创建通知。
使用方法
在页面上引入spop.css和spop.js文件。
toast初始化
此js toast消息队列插件的最基本用法是spop('defaultsmallpop );
spop ('
SuccessI'masuccessSmallPop '、' success '; spop('http://www.Sina.com/',' warning ' );
spop('http://www.Sina.com/',' error ' );
分组
可以将消息分组。 一次只显示一条分组的消息。 spop({ (
template : ' allfieldsarerequired!' ,
组: '提交状态',
style:'error '
);
spop({ (
template : ' yourinformationhasbeensubmitted ',
组: '提交状态',
style:'success '
自动关闭:2000
);
回调函数
回调函数在打开和关闭toast消息提示时均可用。 spop({ (
template:'Please,closeme.',
打开打开: function (
document.body.style.background=' # fff ';
(,
onClose:function (
document.body.style.background=' ';
spop({ (
template:'Thankyou!' ,
style:'success ',
自动关闭:2000
);
}
);
参数设定
spop.js消息提示插件可以使用以下配置参数: {
template:null,//string required.withoutitnothinghappens!
style:'info ',//success,warningorerror
autoclose:false,//miliseconds
position:'top-right ',//top-lefttop-center bottom-left bottom-center bottom-right
icon:true,//orfalse
组:假,//string,附加参数
打开: funtion (),
onClose:funtion () }
); 模板:消息提示模板。 可以是字符串,也可以是HTML代码。
style:toast消息提示的主题样式可以是info、success、warning或error。
自动关闭:是否自动关闭。
位置: toast消息提示的位置。 是的,顶层、顶层、顶层中心、底层、底层中心或底层。
icon :是否显示图标。
group :是否将邮件分组。
onOpen:toast消息指示打开时的回调函数。
onClose:toast消息指示关闭时的回调函数spop.js