jquery toast插件

所属分类：UI-工具提示

77571 383 查看评论 (8)

分享到微信朋友圈

查看演示 website 立即下载

插件描述：Toaster.js是一款Material Design风格jquery toast插件。Toaster.js提供5种主题，以及众多配置参数，用于显示toast类型的消息提示框。

Toaster.js

Toaster.js是一款Material Design风格jquery toast插件。Toaster.js提供5种主题，以及众多配置参数，用于显示toast类型的消息提示框。

Toaster.js的特点有：

提供5种主题风格。
可以设置Toast自动消失。
可以显示关闭按钮。
可以显示关闭进度条。
支持从右向左显示。

使用方法

在页面中引入toast.style.css，jquery和toast.script.js文件。

<link href="css/toast.style.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/toast.script.js"></script>

初始化插件

$.Toast()对象需要接收4个参数，分别为：标题、消息、类型和参数。
$.Toast(title, message, type, options);    
title：Toast的标题。
message：Toast的消息体。
type：Toast的类型。
options：配置参数。

默认的配置参数如下：

{
    // append to body
    appendTo: "body",
    // is stackable?
    stack: false,
    // 'toast-top-left'
    // 'toast-top-right'
    // 'toast-top-center'
    // 'toast-bottom-left'
    // 'toast-bottom-right'
    // 'toast-bottom-center'
    position_class: "toast-bottom-right",
    // true = snackbar
    fullscreen: false,
    // width
    width: 250,
    // space between toasts
    spacing: 20,
    // in milliseconds
    timeout: 4000,
    // has close button
    has_close_btn: true,
    // has icon
    has_icon: true,
    // is sticky
    sticky: false,
    // border radius in pixels
    border_radius: 6,
    // has progress bar
    has_progress: false,
    // RTL support
    rtl: false
}

JavriptDesktop

jQuery分页插件