spop.js是一款純js toast消息提示通知插件。通過spop.js插件，你可以快速的在網(wǎng)頁上制作出漂亮的toast消息提示效果。該js toast消息提示插件的特點(diǎn)還有：

• 內(nèi)置4種主題樣式：default, success, warning, error。
• toast可以顯示在屏幕的6個(gè)位置：top-left, top-center, top-right, bottom-left, bottom-center, bottom-right。
• 可以對消息提示進(jìn)行編組。
• 提供打開和關(guān)閉消息提示時(shí)的回調(diào)函數(shù)。
• 支持HTML內(nèi)容。

使用方法

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

初始化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');

分組

可以對消息進(jìn)行分組，分組后的消息每次只顯示一條。

回調(diào)函數(shù)

在toast消息提示打開和關(guān)閉時(shí)都可以使用回調(diào)函數(shù)。

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    });  }});                  

配置參數(shù)

spop.js消息提示插件的可用配置參數(shù)如下：

• template：消息提示的模板?？梢允且粋€(gè)字符串，或這是HTML代碼。
• style：toast消息提示的主題樣式，可以是info，success， warning 或 error。
• autoclose：是否自動(dòng)關(guān)閉。
• position：toast消息提示的位置?？梢允牵簍op-right，top-left，top-center，bottom-left，bottom-center或bottom-right。
• icon：是否顯示圖標(biāo)。
• group：是否對消息進(jìn)行分組。
• onOpen：toast消息提示打開時(shí)的回調(diào)函數(shù)。
• onClose：toast消息提示關(guān)閉時(shí)的回調(diào)函數(shù)。

Github地址為：https://github.com/silvio-r/spop