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

所属分类:UI-工具提示

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提示插件tooltips

一个简单精致的jQuery的箭头带框提示插件
  工具提示
 13967  72

jq 提示插件

封装 jq 提示插件 Confirm ,兼容ie811chrome ff
  工具提示
 13489  81

按首字母搜索(仿携程)

城市查找按首字母搜索(仿携程)
  工具提示
 12870  107

jquery 工具提示插件awTooltip

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

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

    涓滴成河 0
    2017/11/16 19:10:16

    老哥 交互的问题解决了  能不能给参数加一点中文注释啊 

    回复
    涓滴成河 0
    2017/11/16 17:02:45
    老哥,你这个message怎么与后台交互动态显示消息啊 回复
    涓滴成河 0
    2017/11/16 15:48:56
    ???? ?? 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
取消回复