jquery toast插件

所属分类:UI-工具提示

 8776  52  查看评论 (4)
jquery toast插件 ie兼容8

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
}


相关插件-工具提示

超漂亮的placeholders提示

超漂亮的placeholders提示
  工具提示
 11774  79

jquery 工具提示插件awTooltip

awTooltip是一个工具提示插件,用css和jQuery插件创建的。 它可以显示工具提示右,左,顶部或底部的元素。 也可以使用彩色工具提示样式。
  工具提示
 11122  39

按首字母搜索(仿携程)

城市查找按首字母搜索(仿携程)
  工具提示
 15413  117

jquery自动关闭消息通知插件izitoast.js

iziToast.js是一款跨浏览器响应式消息通知插件。该消息通知插件体积小,使用简单。消息显示时带CSS3动画效果,时尚大方。
  工具提示
 8489  101

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币

    只要心情好,程序BUG少。 0
    2018/3/13 10:16:18
    请问这个 type 都有什么类型 回复
    ??? 0
    2017/12/26 23:28:17

    貌似引用后与font-awesome冲突啦

        Magic Yang!0
        2017/12/31 13:04:49
        手动改CSS 和JS  换字体就可以了
    回复
    倪燕 0
    2017/10/25 10:33:49
取消回复