iziToast.js是一款纯js跨浏览器响应式消息通知插件。该消息通知插件体积小，使用简单。消息显示时带CSS3动画效果，时尚大方。
官方网址：https://marcelodolza.github.io/iziToast
下载地址：https://github.com/marcelodolza/iziToast
使用实例：
iziToast.show({
title: 'Hey',
message: 'What would you like to add?'
});
iziToast.info({
title: 'Hello',
message: 'Welcome!',
});
iziToast.success({
title: 'OK',
message: 'Successfully inserted record!',
});
iziToast.warning({
title: 'Caution',
message: 'You forgot important data',
});
iziToast.error({
title: 'Error',
message: 'Illegal operation',
});
iziToast.question({
title: 'Question',
message: 'Are you ready?',
});
参数设置：
iziToast.show({
id: null,
class: '',
title: '',
titleColor: '',
titleSize: '',
titleLineHeight: '',
message: '',
messageColor: '',
messageSize: '',
messageLineHeight: '',
backgroundColor: '',
theme: 'light', // dark
color: '', // blue, red, green, yellow
icon: '',
iconText: '',
iconColor: '',
iconUrl: null,
image: '',
imageWidth: 50,
maxWidth: null,
zindex: null,
layout: 1,
balloon: false,
close: true,
closeOnEscape: false,
closeOnClick: false,
displayMode: 0, // once, replace
position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
target: '',
targetFirst: true,
timeout: 5000,
rtl: false,
animateInside: true,
drag: true,
pauseOnHover: true,
resetOnHover: false,
progressBar: true,
progressBarColor: '',
progressBarEasing: 'linear',
overlay: false,
overlayClose: false,
overlayColor: 'rgba(0, 0, 0, 0.6)',
transitionIn: 'fadeInUp',
transitionOut: 'fadeOut',
transitionInMobile: 'fadeInUp',
transitionOutMobile: 'fadeOutDown',
buttons: {},
inputs: {},
onOpening: function () {},
onOpened: function () {},
onClosing: function () {},
onClosed: function () {}
});
参数说明：
| ARGUMENT | DEFAULT VALUE |
|
|---|---|---|
| class | '' | The class that will be applied to the toast. It may be used as a reference. |
| title | '' | Title of the toast. |
| titleColor | '' | Title color. |
| titleSize | '' | Title fontSize. |
| titleLineHeight | '' | Title lineHeight. |
| message | '' | Message of notification. |
| messageColor | '' | Message color. |
| messageSize | '' | Message fontSize. |
| messageLineHeight | '' | Message lineHeight. |
| backgroundColor | '' | Background color of the Toast |
| theme | '' | It can be light or dark or set another class. Create and use like this ".iziToast-theme-name" |
| color | '' | It can be #hexadecimal, pre-defined themes like blue, red, green and yellow or set another class. Create and use like this ".iziToast-color-name" |
| icon | '' | Icon class (font-icon of your choice, Icomoon, Fontawesome etc.). |
| iconText | '' | Icon text (font-icon using text, Material Icons, etc.). |
| iconColor | '' | Icon color. |
| iconUrl NEW | null | Address of file to be loaded. Example |
| image | '' | Cover image. Example |
| imageWidth | 50 | Width of cover image. Example 100px |
| maxWidth | null | set maxWidth of toast. Example 500px |
| zindex | 99999 | The z-index CSS attribute of the toast |
| layout | 1 | Example Small e Example Medium. It can be 1 or 2, or use another layout, creating the class like this: ".iziToast-layout3" |
| balloon | false | Applies a balloon like toast. Example. |
| close | true | Show "x" close button |
| closeOnEscape | false | Allows to close toast using the Esc key. |
| closeOnClick NEW | false | Allows to close toast clicking on it. |
| rtl | false | RTL option |
| position | 'bottomRight' | Where it will be shown. It can be bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter or center. |
| target | '' |
Fixed place where you want to show the toasts. Example
|
| targetFirst | true | Add toast to first position. |
|
|
false |
Waits for another toast to be closed on 'onClosed' function. |
| displayMode NEW | 0 |
- Waits until the toast is closed so you can open it (Use 1 or 'once'). Example - Replaces the toast that was already open (Use 2 or 'replace'). Example |
| timeout | 5000 | Amount in milliseconds to close the toast or false to disable. |
| drag | true | Drag Feature. Is used to close the toast. |
| pauseOnHover | true | Pause the toast timeout while the cursor is on it. Example |
| resetOnHover | false | Reset the toast timeout while the cursor is on it. Example |
| progressBar | true | Enable timeout progress bar. |
| progressBarColor | '' | Progress bar color. |
| progressBarEasing | 'linear' | Animation Easing of progress bar. |
| overlay | false | Enables display the Overlay layer on the page. |
| overlayClose | false | Allows to close toast clicking on the Overlay. |
| overlayColor | 'rgba(0, 0, 0, 0.6)' | Overlay background color. |
| animateInside | true | Enable animations of elements in the toast. Example True and Example False. |
| buttons | {} | You can specify an array of buttons. Example |
| inputs NEW | {} | You can specify an array of inputs. Example |
| transitionIn | 'fadeInUp' | Default toast open animation. It can be: bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight or flipInX. |
| transitionOut | 'fadeOut' | Default toast close animation. It can be: fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX |
| transitionInMobile | 'fadeInUp' | Default toast opening mobile transition. |
| transitionOutMobile | 'fadeOutDown' | Default toast closing mobile transition. |
| onOpening | function() {} | Callback function triggered when opening the toast. |
| onOpened | function() {} | Callback function triggered when onOpened the toast. |
| onClosing | function() {} | Callback function triggered when closing the toast. |
| onClosed | function() {} | Callback function triggered when closed the toast. |
下一篇：没有了
讨论数量：0