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
}

https://github.com/kamranahmedse/jquery-toast-plugin

jquery toast插件

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
8. 精力有限,不少源码未能详细测试(解密),不能分辨部分源码是病毒还是误报,所以没有进行任何修改,大家使用前请进行甄别
TP源码网 » jquery toast插件

提供最优质的资源集合

立即查看 了解详情