spop.js是一款纯js toast消息提示通知插件。通过spop.js插件，你可以快速的在网页上制作出漂亮的toast消息提示效果。该js toast消息提示插件的特点还有：
内置4种主题样式：default, success, warning, error。
toast可以显示在屏幕的6个位置：top-left, top-center, top-right, bottom-left, bottom-center, bottom-right。
可以对消息提示进行编组。
提供打开和关闭消息提示时的回调函数。
支持HTML内容。
使用方法
在页面中引入spop.css和spop.js文件。
<link rel="stylesheet" type="text/css" href="./css/spop.css">
[removed][removed]
初始化toast
该js toast消息提示插件最基本的使用方法如下：
spop('Default SmallPop');
spop('<h4 class="spop-title">Success</h4>I´m a success SmallPop', 'success');
spop('<strong>Warning pop</strong>', 'warning');
spop('<strong>Error Here!</strong>', 'error');
分组
可以对消息进行分组，分组后的消息每次只显示一条。
spop({
template: 'All fields are required!',
group: 'submit-satus',
style: 'error'
});
spop({
template: 'Your information has been submitted',
group: 'submit-satus',
style: 'success'
autoclose: 2000
});
回调函数
在toast消息提示打开和关闭时都可以使用回调函数。
spop({
template: 'Please, close me.',
onOpen: function () {
document.body.style.background = "#fff";
},
onClose: function() {
document.body.style.background = "";
spop({
template: 'Thank you!',
style: 'success',
autoclose: 2000
});
}
});
配置参数
spop.js消息提示插件的可用配置参数如下：
spop({
template : null,// string required. Without it nothing happens!
style : 'info',// success, warning or error
autoclose : false,// miliseconds
position : 'top-right',// top-left top-center bottom-left bottom-center bottom-right
icon : true,// or false
group : false,// string, add a id reference
onOpen : funtion() { },
onClose : funtion() { }
});
template
：消息提示的模板。可以是一个字符串，或这是HTML代码。
style
：toast消息提示的主题样式，可以是info，success， warning 或 error。
autoclose
：是否自动关闭。
position
：toast消息提示的位置。可以是：top-right，top-left，top-center，bottom-left，bottom-center或bottom-right。
icon
：是否显示图标。
group
：是否对消息进行分组。
onOpen
：toast消息提示打开时的回调函数。
onClose
：toast消息提示关闭时的回调函数。
0
300
42KB
2019-05-29
11
