README

toastr 是一个用于非阻塞通知的 JavaScript 库。需要 jQuery。目标是创建一个可以自定义和扩展的简单核心库。

浏览器测试由 BrowserStack 提供。

当前版本

2.1.3

演示

演示可以在 http://codeseven.github.io/toastr/demo.html 找到
使用 FontAwesome 图标与 toastr 的演示

CDNjs

Toastr 存放在 CDN JS

调试

压缩版

安装

NuGet 画廊

Install-Package toastr

Bower

bower install toastr

npm

npm install --save toastr

维基和变更日志

包括变更日志的维基

重大变更

####动画更改以下动画选项已被弃用，应替换为

将 options.fadeIn 替换为 options.showDuration
将 options.onFadeIn 替换为 options.onShown
将 options.fadeOut 替换为 options.hideDuration
将 options.onFadeOut 替换为 options.onHidden

快速开始

3 简易步骤

有关其他 API 调用，请参阅演示。

链接到 toastr.css <link href="toastr.css" rel="stylesheet"/>
链接到 toastr.js <script src="toastr.js"></script>

使用 toastr 显示信息、成功、警告或错误的通知

// Display an info toast with no title
toastr.info('Are you the 6 fingered man?')

其他选项

// Display a warning toast, with no title
toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')

// Display a success toast, with a title
toastr.success('Have fun storming the castle!', 'Miracle Max Says')

// Display an error toast, with a title
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')

// Immediately remove current toasts without using animation
toastr.remove()

// Remove current toasts using animation
toastr.clear()

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

转义 HTML 字符

如果您想在标题和消息中转义 HTML 字符，请这样做

toastr.options.escapeHtml = true;

关闭按钮

可选地启用关闭按钮

toastr.options.closeButton = true;

可选地覆盖关闭按钮的 HTML。

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

您还可以覆盖 #toast-container .toast-close-button 的 CSS/LESS。

可选地覆盖关闭按钮点击时的隐藏动画（回退到隐藏配置）。

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

显示顺序

在底部显示最新通知（默认为顶部）

toastr.options.newestOnTop = false;

回调

// 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'); }

动画选项

Toastr 将提供默认动画，因此您无需提供任何这些设置。但是，如果您喜欢，您可以覆盖动画。

####Easings 可选地覆盖显示或隐藏通知的动画缓动。默认为 swing。swing 和 linear 集成到 jQuery 中。

toastr.options.showEasing = 'swing';
toastr.options.hideEasing = 'linear';
toastr.options.closeEasing = 'linear';

使用 jQuery Easing 插件 (http://www.gsgd.co.uk/sandbox/jquery/easing/)

toastr.options.showEasing = 'easeOutBounce';
toastr.options.hideEasing = 'easeInBack';
toastr.options.closeEasing = 'easeInBack';

####动画方法使用您选择的 jQuery 显示/隐藏方法。这些默认为 fadeIn/fadeOut。fadeIn/fadeOut、slideDown/slideUp 和 show/hide 集成到 jQuery 中。

toastr.options.showMethod = 'slideDown';
toastr.options.hideMethod = 'slideUp';
toastr.options.closeMethod = 'slideUp';

###防止重复而不是让相同的通知堆叠，将 preventDuplicates 属性设置为 true。重复项将根据其消息内容与上一个通知匹配。

toastr.options.preventDuplicates = true;

###超时通过设置适当的超时来控制 toastr 如何与用户交互。可以通过将它们设置为 0 来禁用超时。

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

###进度条以视觉方式显示Toast消息即将过期的时间。

toastr.options.progressBar = true;

rtl

翻转Toast以确保在从右到左的语言中正确显示。

toastr.options.rtl = true;

构建Toastr

要构建Toastr的最小化和CSS版本，您需要安装node。（使用Homebrew或Chocolatey。）

npm install -g gulp karma-cli
npm install

此时，依赖项已安装，您可以构建Toastr

运行分析 gulp analyze
运行测试 gulp test
运行构建 gulp

贡献

为了使pull request被考虑，它必须解决一个bug，或者添加一个对广大用户有益的功能。

pull request必须通过现有的单元测试、CI流程，并为新功能的功能或已识别bug的解决添加额外的测试。

请求必须针对develop分支。针对master分支提交的pull request将不会被考虑。

所有pull request都必须得到仓库所有者的批准，他们有权独立决定接受或拒绝。

作者

John Papa

http://twitter.com/John_Papa

Tim Ferrell

http://twitter.com/ferrell_tim

Hans Fjällemark

http://twitter.com/hfjallemark

致谢

受https://github.com/Srirangan/notifer.js/启发。

版权

许可

toastr在MIT许可下 - https://open-source.org.cn/licenses/mit-license.php

grimmlink / toastr

维护者

详细信息