jQuery消息提示插件toastr使用详解

引入

<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css">
<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>

使用

toastr.success('Hello world!', 'Toastr fun!');  /success 、 error、info、warning 第二个参数为标题可以省略

//关闭警告框
toastr.clear([toast]);

//获取当前警告框
toastr.active();

//刷新警告框 第二个参数为超时时间
toastr.refreshTimer(toast, 5000);

参数配置

toastr.options = { 
closeButton: false, 
debug: false, 
progressBar: true, 
positionClass: "toast-top-center", 
onclick: null, 
showDuration: "300", 
hideDuration: "1000", 
timeOut: "2000", 
extendedTimeOut: "1000", 
showEasing: "swing", 
hideEasing: "linear", 
showMethod: "fadeIn", 
hideMethod: "fadeOut" ,
newestOnTop: true,
preventDuplicates: true,
preventOpenDuplicates: true,
maxOpened:1 ，
allowHtml: false,
closeButton: false,
closeHtml: '<button>×</button>',
extendedTimeOut: 1000,
iconClasses: {
error: 'toast-error',
info: 'toast-info',
success: 'toast-success',
warning: 'toast-warning'
}, 
messageClass: 'toast-message',
onHidden: null,
onShown: null,
onTap: null,
progressBar: false,
tapToDismiss: true,
templates: {
toast: 'directives/toast/toast.html',
progressbar: 'directives/progressbar/progressbar.html'
},
timeOut: 5000,
titleClass: 'toast-title',
toastClass: 'toast'

};

说明：

• autoDismiss: true 显示最新的toastr
• containerId: 默认为"toast-container",设置toastr容器的id名称.
• maxOpened: 页面一次性最多显示多少个toastr.
• newestOnTop: true 新的toastr会显示在旧的toastr前面
• positionClass: 设置toastr显示位置的class
• preventDuplicates: true 重复内容的提示框只出现一次，无论提示框是打开还是关闭
• preventOpenDuplicates: true 重复内容的提示框在开启时只出现一个 如果当前的提示框已经打开，不会多开。直到提示框关闭后，才可再开)
• target: 默认为’body’, 设置toastr的目标容器
• allowHtml: 设置提示内容可包含html格式
• closeButton: 设置显示"X" 关闭按钮
• closeHtml: 自定义html替代closeButton内容，closeButton为true时才显示.
• extendedTimeOut: 设置当你鼠标滑入后的timeout，该timeout会更新关闭所需的timeout.
• extraData: 如果重写模版，你可以自定义全局数据给你的toasts
• iconClasses: 设置各个类型的icon图标class
• messageClass: 设置toastr提示信息的class
• progressBar: 设置显示timeout时间进度条
• tapToDismiss: 设置toastr被点击时关闭
• templates: 自定义模版
• timeOut: 设置toastr过多久关闭
• titleClass: 设置toastr标题的class
• toastClass: 设置toastr基本的class

注意：如果想让toastr点击关闭按钮时才能关闭，可以将“extendedTimeOut”设置为一个很大的数字。