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

所属分类:UI-工具提示

 4033  73  查看评论 (6)
jquery自动关闭消息通知插件izitoast.js ie兼容10

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()方法用于销毁消息通知框。

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


相关插件-工具提示

基于Animate.css的炫酷jQuery消息通知框插件

notification是一款基于Animate.css的炫酷jQuery消息通知框插件。该插件可以在屏幕的四个角显示消息通知框,结合Animate.css可以制作出多种效果非常炫酷的CSS3动画特效。
  工具提示
 6814  82

jquery 工具提示插件awTooltip

awTooltip是一个工具提示插件,用css和jQuery插件创建的。 它可以显示工具提示右,左,顶部或底部的元素。 也可以使用彩色工具提示样式。
  工具提示
 7777  32

jquery弹出插件WebUI Popover

WebUI Popover是一个轻量级的jQuery弹出插件,提高引导弹出和一些很棒的新功能。
  工具提示
 20376  59

超棒的悬浮层式的页面元素注解jQuery插件 - Chardin.js

还记得我们以前分享的超酷悬浮覆盖式的注释效果吗?今天这里我们分享一个能够帮助你快速的生成类似页面注释效果的jQuery插件 - Chardin.js
  工具提示
 11876  31

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币

    Zue 0
    2017/5/21 4:45:36
    erec 0
    2017/3/4 17:26:40
    ╃ 伊人未归 ┽ 0
    2017/2/16 14:57:12
    oukaku 0
    2017/1/15 21:35:51
    老A 0
    2017/1/2 16:01:30
    Xtreme-Protector° 0
    2016/12/30 10:12:26
取消回复