jQuery消息提示插件toastr使用详解
## 引入
```html
<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>
```
## 使用
```html
toastr.success('Hello world!', 'Toastr fun!'); /success 、 error、info、warning 第二个参数为标题可以省略
//关闭警告框
toastr.clear([toast]);
//获取当前警告框
toastr.active();
//刷新警告框 第二个参数为超时时间
toastr.refreshTimer(toast, 5000);
```
## 参数配置
```javascript
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”设置为一个很大的数字。
