README

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

浏览器测试由BrowserStack提供。

当前版本

2.1.3

演示

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

CDNjs

Toastr托管在CDN JS

调试

最小化

安装

NuGet Gallery

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将提供默认动画，因此您无需提供任何这些设置。但是，如果您喜欢，您可以覆盖动画。

####缓动可选地覆盖显示或隐藏通知的动画缓动。默认为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 show/hide方法。这些默认为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

###进度条通过视觉方式指示通知过期前的持续时间。

toastr.options.progressBar = true;

rtl

翻转toastr以正确显示从右到左的语言。

toastr.options.rtl = true;

构建Toastr

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

npm install -g gulp karma-cli
npm install

在此阶段，依赖项已经安装，您可以构建 Toastr

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

贡献

为了使拉取请求被考虑，它必须解决一个错误，或者添加一个对大量用户有益的功能。

拉取请求必须通过现有的单元测试、CI 流程，并为新的功能操作成功或已识别错误的解决方案添加额外的测试。

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

所有拉取请求均需经过仓库所有者的批准，他们有权决定是否接受或拒绝。

作者

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

stinger-soft / toastr

维护者

详细信息