[油猴脚本开发指南]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]