Toastr - 快速隐藏 JavaScript 通知插件

Toastr 是一个小巧的 JavaScript 插件，用于创建漂亮的通知、警告和错误消息。它对用户友好、易于使用，并且具有丰富的配置选项，可以根据您的需求进行定制和扩展。

特性

• 支持多种通知类型（成功、信息、警告、错误）
• 可以配置通知位置、动画效果、持续时间、字体样式等
• 可以轻松自定义通知主题和样式
• 可以通过事件和回调函数进行扩展和控制

用法

使用 Toastr 非常简单。您只需先在页面中加载 Toastr 库文件，并在需要的时候调用相应的函数即可显示通知：

// 显示一个简单的成功通知
toastr.success('操作成功！');

// 显示一个警告通知，指定标题和持续时间
toastr.warning('您尚未保存数据！', '警告', {timeOut: 3000});

// 显示一个错误通知，并将其推迟到 2 秒后再显示
var toast = toastr.error('操作失败！', '错误', {hideDuration: 2000});
setTimeout(function() {toast.fadeOut();}, 2000);

配置选项

通过设置选项，您可以控制通知的外观和行为。以下是一些常用选项：

• positionClass: 指定通知的位置，可以是 toast-top-right、toast-bottom-right、toast-bottom-left、toast-top-left、toast-top-full-width、toast-bottom-full-width 或 toast-top-center。
• showDuration: 指定通知的显示时间（毫秒）。
• hideDuration: 指定通知的隐藏时间（毫秒）。
• timeOut: 指定通知的总显示时间（毫秒）。
• extendedTimeOut: 指定用户将鼠标移向通知时，通知在显示的时间（毫秒）。
• closeButton: 是否显示关闭按钮。
• newestOnTop: 是否在顶部显示最新的通知。
• progressBar: 是否显示进度条。
• rtl: 是否从右到左显示通知。
• preventDuplicates: 是否防止重复的通知。
• onclick: 点击通知时触发的回调函数。
• onCloseClick: 点击关闭按钮时触发的回调函数。
• onShow: 显示通知时触发的回调函数。
• onHidden: 隐藏通知时触发的回调函数。

您可以通过以下方式设置选项：

toastr.options.positionClass = 'toast-bottom-right';
toastr.options.timeOut = 3000;
toastr.options.progressBar = true;

主题定制

Toastr 支持通过 CSS 样式表进行主题定制。您可以修改默认样式，或者创建自己的样式表。默认情况下，Toastr 会自动加载 toastr.css 样式表。如果您需要自定义样式，可以在页面中添加一个新的样式表，然后在 toastr.options 对象中设置 css 属性：

<link rel="stylesheet" href="my-toastr.css">
<script>
  toastr.options.css = 'my-toastr';
</script>

扩展 Toastr

Toastr 支持通过事件和回调函数进行扩展和控制。您可以监听各种事件，然后在相应事件发生时执行自定义的代码。以下是一些常用事件：

• toastr.options.onShown: 显示通知时触发。
• toastr.options.onHidden: 隐藏通知时触发。
• toastr.options.onclick: 点击通知时触发。
• toastr.options.onCloseClick: 点击关闭按钮时触发。

您可以通过以下方式监听事件：

toastr.options.onShown = function() {
  console.log('通知已显示！');
};

另外，您也可以使用 Toastr 提供的 API 手动显示、隐藏和移除通知。例如：

// 手动显示一个通知
toastr.info('新消息！');

// 隐藏当前显示的通知
toastr.clear();

// 移除所有通知
toastr.remove();

总结

Toastr 是一个简单灵活、易于使用的 JavaScript 通知插件，可以让您的网站或应用程序在用户操作时提供友好的提示和反馈。它支持多种通知类型、多种自定义选项和主题定制，同时还提供了丰富的事件和 API，可以满足您的各种需求。如果您正在寻找一个好用的通知插件，不妨试试 Toastr。