Material Design风格jquery toast插件

当前位置:主页 > jQuery库 > Lightbox和对话框 > Material Design风格jquery toast插件
Material Design风格jquery toast插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:08-24
    阅读:
简要教程

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

}                 
                

Toaster.js插件的github地址为:https://github.com/mehrankhorrami/toaster