iziToast.js是一款纯js跨浏览器响应式消息通知插件。该消息通知插件体积小，使用简单。消息显示时带CSS3动画效果，时尚大方。它的特点还有：

  • 自带4种主题效果： info, warning, error 和 success。
  • 可以自定义主题。
  • 可以自定义图标。
  • 可以自定义图片。
  • 可以自定义消息通知显示的位置。
  • 消息通知可以设置为自动关闭。
  • 可以自定义消息通知框显示时的CSS3动画。

安装

可以通过npm或bower来安装iziToast.js消息通知插件。

npm install izitoast --save
bower install izitoast

使用方法

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

<link rel="stylesheet" href="iziToast.min.css">
<script src="iziToast.min.js"></script>
初始化插件

可以通过iziToast.show()方法来实例化一个消息通知框。

iziToast.show({
    title: 'Hello World!',
    message: 'I am a basic toast message!'
});

配置参数

iziToast.js消息通知插件的默认配置参数如下：

iziToast.show({
    class: '',
    title: '',
    message: '',
    color: '', // blue, red, green, yellow
    icon: '',
    iconText: '',
    iconColor: '',
    image: '',
    imageWidth: 50,
    layout: 1,
    balloon: false,
    close: true,
    rtl: false,
    position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
    target: '',
    timeout: 5000,
    pauseOnHover: true,
    resetOnHover: false,
    progressBar: true,
    progressBarColor: '',
    animateInside: true,
    buttons: {},
    transitionIn: 'fadeInUp',
    transitionOut: 'fadeOut',
    transitionInMobile: 'fadeInUp',
    transitionOutMobile: 'fadeOutDown',
    onOpen: function () {},
    onClose: function () {}
});
参数 默认值 描述
class '' 消息通知框的class类。
title '' 消息通知框的标题。
message '' 提示的消息。
color '' 颜色。可以是十六进制颜色，颜色关键字等。
icon '' 图标。可以是Icomoon, Fontawesome等。
iconText '' 图标文字。
iconColor '' 图标颜色。
image '' 显示的图像。
imageWidth 50 图像的宽度。
layout 1 布局，可以是1或者2。也可以使用其它布局，例如“.iziToast-layout3”。
balloon false 是否使用气泡效果。
close true 是否显示关闭按钮。
rtl false RTL
position 'bottomRight' 在哪里显示消息通知框。bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter 或 center。
target '' 显示消息通知框的固定位置。
timeout 5000 关闭消息通知框的时间，单位毫秒。
pauseOnHover true 是否在鼠标滑过时暂停。
resetOnHover false 是否在鼠标滑过时重置。
progressbar true 是否显示进度条。
progressbarColor '' 进度条的颜色。
animateInside true 是否允许动画。
buttons {} 指定一组按钮。
transitionIn 'fadeInUp' 过渡动画的类型。可以是：bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight 或 flipInX。
transitionOut 'fadeOut' 默认的关闭动画。可以是：fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX。
transitionInMobile 'fadeInUp' 在移动端打开消息框的动画。
transitionOutMobile 'fadeOutDown' 在移动端关闭消息框的动画。
onOpen function () {} 打开消息框时的回调函数。
onClose function () {} 关闭消息框时的回调函数。

方法

settings()方法用于设置默认值。

iziToast.settings({
    timeout: 10000,
    resetOnHover: true,
    icon: 'material-icons',
    transitionIn: 'flipInX',
    transitionOut: 'flipOutX',
    onOpen: function(){
        console.log('callback abriu!');
    },
    onClose: function(){
        console.log("callback fechou!");
    }
});

show()方法用于打开一个消息通知框。

iziToast.show({
    color: 'dark',
    icon: 'icon-person',
    title: 'Hey',
    message: 'Welcome!',
    position: 'center', 
    progressBarColor: 'rgb(0, 255, 184)',
    buttons: [
        ['<button>Ok</button>', function (instance, toast) {
            alert("Hello world!");
        }],
        ['<button>Close</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOutUp' }, toast);
        }]
    ]
});

hide()方法用于关闭一个消息通知框。

var toast = document.querySelector('.toast');

iziToast.hide({
    transitionOut: 'fadeOutUp'
}, toast);

destroy()方法用于销毁消息通知框。

iziToast.destroy();

info()方法。

iziToast.info({
    title: 'Hello',
    message: 'Welcome!',
});

success()方法。

iziToast.success({
    title: 'OK',
    message: 'Successfully inserted record!',
});

warning()方法。

iziToast.warning({ title: 'Caution', message: 'You forgot important data', });

error()方法。

iziToast.error({
    title: 'Error',
    message: 'Illegal operation',
});

事件

Open - 在消息通知框打开时触发。

document.addEventListener('iziToast-open', function(data){
    if(data.detail.class == 'test'){
        console.log('test open');
    }
});

Close - 在消息通知框关闭时触发。

document.addEventListener('iziToast-close', function(data){
    if(data.detail.class == 'test'){
        console.log('test close');
    }
});

ziToast.js消息通知插件的github地址是：https://github.com/dolce/iziToast