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">
<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 toast消息提示插件的github地址为:https://github.com/silvio-r/spop