js消息提示通知插件SmallPop

所属分类：UI-工具提示

47679 424 查看评论 (13)

分享到微信朋友圈

查看演示 website 立即下载

插件描述：spop.js是一款纯js toast消息提示通知插件。通过spop.js插件，你可以快速的在网页上制作出漂亮的toast消息提示效果

SmallPop

一个轻量级的弹出提示通知插件没有依赖关系，使用这个JavaScript插件轻松创建通知。

使用方法

在页面中引入spop.css和spop.js文件。

<link rel="stylesheet" type="text/css" href="./css/spop.css">
<script type="text/javascript" src="./js/spop.js"></script>

初始化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消息提示关闭时的回调函数spop.js