李恒道 发表于 2021-10-7 19:13:46

[油猴脚本开发指南]toastr引用

# 关于正式脚本引用问题

gf发布的require路径有一定的限制,这里依然目前没有找到特别好的办法

jsdelivr被限制了gh路径的发布

所以如果你引用我的路径很大概率是要出问题的

请不要在正式发布脚本尝试引入我的魔改

# 快捷使用

警告,原文档https://github.com/CodeSeven/toastr

这里仅做简单的翻译,方便大家查阅和参考

是我个人的理解和大概翻译,如果出现错误请以官方为准。

引入css

引入js

提示信息

```
toastr.info('Are you the 6 fingered man?')
```

# 详细信息

展示警告信息

```
toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')
```

展示成功信息

```
toastr.success('Have fun storming the castle!', 'Miracle Max Says')
```

展示错误信息

```
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')
```

立即移除toast不使用动画

```
toastr.remove()
```

立即移除toast但使用动画

```
toastr.clear()
```

覆盖全局配置的toast

```

toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000})
```

# 使用转义字符

```
toastr.options.escapeHtml = true;
```

# 使用关闭按钮

## 选项启用关闭按钮

```
toastr.options.closeButton = true;
```

## 选项覆盖关闭按钮html

```
toastr.options.closeHtml = '<button><i class="icon-off"></i></button>';
```

还可以复写关闭按钮的CSS`#toast-container .toast-close-button`

可选择关闭按钮的时候覆盖隐藏动画

```java
toastr.options.closeMethod = 'fadeOut';
toastr.options.closeDuration = 300;
toastr.options.closeEasing = 'swing';
```

# 控制显示顺序

```
toastr.options.newestOnTop = false;
```

默认为假,如果为真则从上方显示最新

# 回调

控制toast显示 隐藏 点击 关闭点击按钮的回调

```javascript
// Define a callback for when the toast is shown/hidden/clicked
toastr.options.onShown = function() { console.log('hello'); }
toastr.options.onHidden = function() { console.log('goodbye'); }
toastr.options.onclick = function() { console.log('clicked'); }
toastr.options.onCloseClick = function() { console.log('close button clicked'); }
```

# 动画

toast提供了默认动画,如无必要,无需覆盖。

这里由于大部分人并不需要特别细致的动画,我就跳过这里了

有兴趣可以自己研究一下

# 防止重复

```
toastr.options.preventDuplicates = true;
```

通过与之前的toast内容进行匹配来判断重复。

# 超时控制

```javascript
toastr.options.timeOut = 30; // How long the toast will display without user interaction
toastr.options.extendedTimeOut = 60; // How long the toast will display after a user hovers over it
```

timeout为没有用户交互的情况下的显示时间

extendedtimeout为用户鼠标悬停时,toast的显示时间

# 防止自动隐藏

将超时以及悬停超时设置为0,则一直存在直至被选中

```javascript
toastr.options.timeOut = 0;
toastr.options.extendedTimeOut = 0;
```

# 进度条

视觉上提示用户还有多久用户toast过期

```
toastr.options.progressBar = true;
```

# 原文

https://github.com/CodeSeven/toastr
页: [1]
查看完整版本: [油猴脚本开发指南]toastr引用