jquery toastr 一款轻量级的通知提示框插件。
网页开发中经常会用到提示框，自带的alert样式无法调整，用户体验差。
所以一般通过自定义提示框来实现弹窗提示信息，而jquery toastr正是为此的一款非常棒的插件。
开发中用angular比较多，所以笔记记录了angular一些常见使用，与jquery版本有些许不同 ，相差不大。
在HTML引用js文件
<link rel="stylesheet" type="text/css" href="angular-toastr.css" />
<script type="text/javascript" src="angular-toastr.tpls.js"></script>
在angular模版中注入依赖
angular.module('app', ['ngAnimate', 'toastr'])
toastr使用中会用到动画，所以需加上ngAnimate，如果不引入ngAnimate，没有动画效果，不影响显示。
开始使用
1.成功提示
toastr.success('Hello world!', 'Toastr fun!');
2.普通提示
toastr.info('We are open today from 10 to 22', 'Information');
3.错误提示
toastr.error('Your credentials are gone', 'Error');
4.警告提示
toastr.warning('Your computer is about to explode!', 'Warning');
第一个参数为提示内容，第二个参数为提示标题，如果不需要标题，则可省略第二个参数
toastr.success('I don\'t need a title to live');
关闭提示框
toastr.clear([toast]);
获取当前显示的提示框
toastr.active();
刷新打开的提示框（第二个参数配置超时时间）
toastr.refreshTimer(toast, 5000);
全局配置
app.config(function(toastrConfig) {
angular.extend(toastrConfig, {
autoDismiss: false,
containerId: 'toast-container',
maxOpened: 0,
newestOnTop: true,
positionClass: 'toast-top-right',
preventDuplicates: false,
preventOpenDuplicates: false,
target: 'body'
});
});
- autoDismiss: true 显示最新的toastr
- containerId: 默认为"toast-container",设置toastr容器的id名称.
- maxOpened: 页面一次性最多显示多少个toastr.
- newestOnTop: true 新的toastr会显示在旧的toastr前面
- positionClass: 设置toastr显示位置的class
- preventDuplicates: true 重复内容的提示框只出现一次，无论提示框是打开还是关闭
- preventOpenDuplicates: true 重复内容的提示框在开启时只出现一个 如果当前的提示框已经打开，不会多开。直到提示框关闭后，才可再开)
- target: 默认为'body', 设置toastr的目标容器
| positionClass | |
|---|---|
| toast-top-left | 顶端左边 |
| toast-top-right | 顶端右边 |
| toast-top-center | 顶端中间 |
| toast-top-full-width | 顶端中间(宽度铺满) |
| toast-bottom-right | 底部右边 |
| toast-bottom-left | 底部左边 |
| toast-bottom-center | 底部中间 |
| toast-bottom-full-width | 底部中间(宽度铺满) |
app.config(function(toastrConfig) {
angular.extend(toastrConfig, {
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'
});
});
- 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
参考文章：