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

所属分类:UI-工具提示

 38019  450  查看评论 (16)
分享到微信朋友圈
X
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');
    }
});


相关插件-工具提示

按首字母搜索(仿携程)

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

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

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

jQuery网页新功能步骤引导

在网站上经常看到的网页新功能步骤引导
  工具提示
 27521  355

一款腾讯UED设计的提示插件

一款腾讯UED设计的提示插件
  工具提示
 43753  435

讨论这个项目(16)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    0
    2021/3/11 14:40:43
    好好看 想下载,挺好 回复
    阿飞 0
    2020/12/4 16:11:16
    男人不可以穷?? 1
    2019/8/20 13:48:25

    参数注释
    class '' 消息通知框的class类。
    title '' 消息通知框的标题。
    message '' 提示的消息。
    color '' 颜色。可以是十六进制颜色,颜色关键字等。
    icon '' 图标。可以是Icomoon, Fontawesome等。
    iconText '' 图标文字。
    iconColor '' 图标颜色。
    image '' 显示的图像。
    imageWidth 50 图像的宽度。
    layout 1 布局,可以是1或者2。也可以使用其它布局,例如“.iziToast-layout3”。
    balloon false 是否使用气泡效果。
    close true 是否显示关闭按钮。
    rtl false RTL
    position 'bottomRight' 在哪里显示消息通知框。bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter 或 center。
    target '' 显示消息通知框的固定位置。
    timeout 5000 关闭消息通知框的时间,单位毫秒。
    pauseOnHover true 是否在鼠标滑过时暂停。
    resetOnHover false 是否在鼠标滑过时重置。
    progressbar true 是否显示进度条。
    progressbarColor '' 进度条的颜色。
    animateInside true 是否允许动画。
    buttons {} 指定一组按钮。
    transitionIn 'fadeInUp' 过渡动画的类型。可以是:bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight 或 flipInX。
    transitionOut 'fadeOut' 默认的关闭动画。可以是:fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX。
    transitionInMobile 'fadeInUp' 在移动端打开消息框的动画。
    transitionOutMobile 'fadeOutDown' 在移动端关闭消息框的动画。
    onOpen function () {} 打开消息框时的回调函数。
    onClose function () {} 关闭消息框时的回调函数。

    回复
    独木成林。 0
    2017/12/21 19:59:28

    我要用它

        kieran0
        2017/12/27 9:50:22

        感觉很棒

        四星Bayern0
        2018/11/8 15:36:31
        想下载
    回复
    涓滴成河 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
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复