首页 > 特效插件 > 表格弹出层 >  Toaster.js - 基于jQuery的带进度条的Material Design风格toast插件正文

Toaster.js - 基于jQuery的带进度条的Material Design风格toast插件

特效介绍

1.png


Toaster.js是一款基于jQuery的带进度条的Material Design风格toast插件。Toaster.js提供5种主题,以及众多配置参数,用于显示toast类型的消息提示框。简单易用,非常方便。


特点:

  • 提供5种主题风格

  • 可以设置Toast自动消失

  • 可以显示关闭按钮

  • 可以显示关闭进度条

  • 支持从右向左显示


使用方法

1、在页面中引入toast.style.css,jquery和toast.script.js文件

<script src="http://www.5imoban.net/download/jquery/jquery-1.11.0.min.js"></script>     
<script src="js/toast.script.js"></script>


2、初始化插件

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


3、默认的配置参数如下:

{
    // 追加到body内
    appendTo: "body",
    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,
    // 间距
    spacing: 20,
    // 延迟关闭时间,单位,毫秒
    timeout: 4000,
    // 是否显示关闭按钮
    has_close_btn: true,
    // 是否显示图标
    has_icon: true,
    sticky: false,
    border_radius: 6,
    // 是否显示进度条
    has_progress: false,
    rtl: false
}


下载 提取码/密码:77kd(点击复制密码) 预览