引入: script src="/uploads/allimg/210615/1SG342E-0.jpg"/script link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" 参数配置: toastr.success( ‘Hello world!‘ , ‘Toastr fun!‘
引入:
<script src="http://img.558idc.com/uploadfile/allimg/210615/1SG342E-0.jpg"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css">
参数配置:
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