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

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

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

控制显示顺序

toastr.options.newestOnTop = false;

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

回调

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

// 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内容进行匹配来判断重复。

超时控制

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，则一直存在直至被选中

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

进度条

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

toastr.options.progressBar = true;

原文

https://github.com/CodeSeven/toastr