跨浏览器响应式消息通知插件

PetitQ 对话框/Tips 2020-1-16 2.12K 0 0

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

自带 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', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center

```
    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 () {}
```
```
});
```

参数	默认值	描述
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 () {}	关闭消息框时的回调函数。

方法：

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

ziToast.js 消息通知插件的 github 地址是：https://github.com/dolce/iziToast

跨浏览器响应式消息通知插件

已有 529 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

对话框/Tips

跨浏览器响应式消息通知插件

使用方法：

初始化插件：

配置参数：

方法：

info()方法：

success()方法：

warning()方法：

error()方法：

事件：

跨浏览器响应式消息通知插件

相关文章

bootstrap 4 模态窗口增强jQuery插件

jQuery自适应窗口特效插件

动画过渡效果jQuery窗口插件

发表回复取消回复

热销模板

对话框/Tips

使用方法：

初始化插件：

配置参数：

方法：

info()方法：

success()方法：

warning()方法：

error()方法：

事件：

跨浏览器响应式消息通知插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复