轻量级js消息提示通知插件SmallPop

效果图

插件下载地址

使用方法

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

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

该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');

 

例：

function showTipsBox(typeName,func){
        spop({
            template: '<h4 class="spop-title">通知</h4>有'+typeName+'待处理，<a '+func+' data-spop="close">点击查看</a>',
            autoclose: 10000,
            group:typeName,
            position:'bottom-right'
        });
        }

分组

可以对消息进行分组，分组后的消息每次只显示一条。

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