`toastr`是一款轻量级的JavaScript通知提示插件，主要设计用于在网页开发中提供美观且可定制化的弹窗提示信息。相比浏览器内置的`alert`方法，`toastr`提供了更多的样式和功能，能显著提升用户体验。该插件支持jQuery和AngularJS等框架，使得在多种开发环境中集成变得简单。
### 基本使用
在HTML文件中，你需要引入`toastr`的CSS和JS文件。例如：
```html
<link rel="stylesheet" type="text/css" href="angular-toastr.css" />
<script type="text/javascript" src="angular-toastr.tpls.js"></script>
```
在AngularJS项目中，你需要将`toastr`服务作为模块的依赖注入：
```javascript
angular.module('app', ['ngAnimate', 'toastr']);
```
### 提示类型
`toastr`提供了四种基本的提示类型：
1. **成功提示**：使用`success`方法，例如：
```javascript
toastr.success('Hello world!', 'Toastr fun!');
```
2. **普通提示**（信息提示）：使用`info`方法，例如：
```javascript
toastr.info('We are open today from 10 to 22', 'Information');
```
3. **错误提示**：使用`error`方法，例如：
```javascript
toastr.error('Your credentials are gone', 'Error');
```
4. **警告提示**：使用`warning`方法，例如：
```javascript
toastr.warning('Your computer is about to explode!', 'Warning');
```
如果不需要标题，可以省略第二个参数。
### 提示位置
`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`：底部中间（宽度铺满）
### 配置选项
`toastr`提供了一系列全局配置选项，可以在应用初始化时进行设置，例如：
```javascript
app.config(function(toastrConfig) {
angular.extend(toastrConfig, {
autoDismiss: false, // 是否自动关闭提示框
containerId: 'toast-container', // 容器ID
maxOpened: 0, // 最大同时显示的提示框数量
newestOnTop: true, // 新的提示框显示在旧的上方
positionClass: 'toast-top-right', // 提示框位置
preventDuplicates: false, // 是否防止内容重复的提示框再次显示
preventOpenDuplicates: false, // 是否防止内容重复的提示框同时开启
target: 'body' // 设置提示框的目标容器
});
});
```
### 控制提示框
- **关闭提示框**：使用`clear`方法，可以指定特定的提示框关闭，或者不传参数关闭所有提示框。
```javascript
toastr.clear([toast]);
```
- **获取当前显示的提示框**：调用`active()`方法。
```javascript
toastr.active();
```
- **刷新提示框计时器**：使用`refreshTimer`方法，传入提示框对象和新的超时时间。
```javascript
toastr.refreshTimer(toast, 5000);
```
### 动画效果
如果需要动画效果，需要引入`ngAnimate`模块，否则不会有动画但不会影响提示框的显示。
### 其他功能
- 可以自定义提示框的样式和行为，通过修改CSS或扩展`toastr`的配置选项。
- 提供事件回调，例如`onShown`、`onHidden`、`onCloseClick`等，用于在提示框显示、隐藏或点击关闭按钮时执行自定义操作。
`toastr`是一个强大且灵活的通知提示插件，它使开发者能够方便地在网页应用中添加各种提示信息，同时保持界面的整洁和用户体验的优化。通过适当的配置和使用，可以满足大部分项目中的提示需求。
