Material Design风格jquery toast插件

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

相关插件

基于Bootstrap4的Toast提示插件

js炫酷消息通知插件

bootstrap4和jQuery消息通知插件

Bootstrap 4 仿Mac Growl样式toast消息框插件