iziToast通知消息使用说明

Javascript 249 0 2024-08-15

iziToast通知消息使用说明

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
DESCRIPTION
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 blueredgreen and yellow or set another class. Create and use like this ".iziToast-color-name"
icon '' Icon class (font-icon of your choice, IcomoonFontawesome 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 bottomRightbottomLefttopRighttopLefttopCenterbottomCenter or center.
target '' Fixed place where you want to show the toasts. Example
targetFirst true Add toast to first position.
toastOnce DEPRECIATED false Waits for another toast to be closed on 'onClosed' function. You'll need an ID to use it.
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: bounceInLeftbounceInRightbounceInUpbounceInDownfadeInfadeInDownfadeInUpfadeInLeftfadeInRight 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.

上一篇:js客户端webSocket API介绍

下一篇:没有了

讨论数量:0

请先登录再发表讨论。 2024-10-14

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链