jquery自动关闭消息通知插件izitoast.js

查看演示立即下载

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

iziToast.js使用方法

它的特点还有：自带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()方法用于销毁消息通知框。

1	`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');
    }
});

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery模仿PPTCSS3介绍
下一个特效：点击效果Google Design 谷歌的设计团队