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

所属分类:UI-工具提示

 4460  75  查看评论 (7)
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');
    }
});


相关插件-工具提示

jQuery通知提示插件overhang.js

overhang.js 是一个JQuery插件显示即时通知、 确认或给定元素中的提示。
  工具提示
 5074  50

jQuery信息提示插件justTools.js

因为需要这样一个小插件,前两年写了一个。找不到了,网上找了写都不能用。因为当DIV设置滚动条会切掉,所以就自己动手了
  工具提示
 2481  27

jQuery工具提示插件zebra_tooltips

zebra_tooltips用于创建简单而聪明工具提示插件,特点轻量级、高度可配置。
  工具提示
 15487  7

超漂亮的placeholders提示

超漂亮的placeholders提示
  工具提示
 8475  68

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

    ???? ?? 0
    2017/7/4 16:47:18

    能不能设置自动弹出提示框

    回复
    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
取消回复