jQuery跨浏览器自动关闭消息通知弹出层插件 - iziToast.js

jQuery跨浏览器自动关闭消息通知弹出层插件 - iziToast.js4340
iziToast.js是一款跨浏览器响应式消息通知插件。该消息通知插件体积小,使用简单。消息显示时带CSS3动画效果,时尚大方。
它的特点还有:
自带4种主题效果: info, warning, error 和 success。
可以自定义主题。
可以自定义图标。
可以自定义图片。
可以自定义消息通知显示的位置。
消息通知可以设置为自动关闭。
可以自定义消息通知框显示时的CSS3动画。

使用方法
在页面中引入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', 
    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 () {}
});                  
方法 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');
    }
});    

也许你还喜欢