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
本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/jQuery/Lightbox-Dialog/201708244702.html