特效介绍
Toaster.js是一款基于jQuery的带进度条的Material Design风格toast插件。Toaster.js提供5种主题,以及众多配置参数,用于显示toast类型的消息提示框。简单易用,非常方便。
特点:
提供5种主题风格
可以设置Toast自动消失
可以显示关闭按钮
可以显示关闭进度条
支持从右向左显示
使用方法
1、在页面中引入toast.style.css,jquery和toast.script.js文件
<script src="http://www.5imoban.net/download/jquery/jquery-1.11.0.min.js"></script> <script src="js/toast.script.js"></script>
2、初始化插件
// $.Toast()对象需要接收4个参数,分别为:标题、消息、类型和参数。 $.Toast(title, message, type, options); // title:Toast的标题。 // message:Toast的消息体。 // type:Toast的类型。 // options:配置参数。
3、默认的配置参数如下:
{ // 追加到body内 appendTo: "body", 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, // 间距 spacing: 20, // 延迟关闭时间,单位,毫秒 timeout: 4000, // 是否显示关闭按钮 has_close_btn: true, // 是否显示图标 has_icon: true, sticky: false, border_radius: 6, // 是否显示进度条 has_progress: false, rtl: false }