Toastr.js (CDN) - 弹出通知框的JavaScript库

Toastr.js是一个轻量级的JavaScript库，用于在Web应用程序中弹出通知信息。它支持在页面上弹出不同类型的通知，包括成功、信息、警告和错误等。Toastr.js易于使用，在Node.js、React、Angular和Vue等框架中都可以使用。

如何使用Toastr.js

你可以从CDN获取Toastr.js，并通过引入JavaScript和CSS文件来使用它。代码如下：

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

或者，你可以从GitHub上下载Toastr.js，并手动添加到你的项目中。

Toastr.js已经包含在许多前端框架的组件库中，如Bootstrap和Foundation等。

如何弹出通知

Toastr.js提供了一些JavaScript函数，用于在页面上弹出不同类型的通知。以下是最常用的几个函数：

显示成功通知

toastr.success('操作成功');

显示信息通知

toastr.info('您有一条未读消息');

显示警告通知

toastr.warning('文件即将过期');

显示错误通知

toastr.error('操作失败，请重试');

自定义样式

Toastr.js提供了许多选项，用于自定义通知框的样式、位置、延迟等。以下是一些常用的选项：

toastr.options = {
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": true,
  "positionClass": "toast-top-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}

你可以将选项应用于所有通知或特定类型的通知。以下是一些示例：

应用于所有通知

toastr.options.timeOut = 2000;
toastr.options.positionClass = 'toast-top-right';

应用于指定类型的通知

toastr.options.timeOut = 3000;
toastr.options.positionClass = 'toast-top-right';

toastr.success('操作成功');
toastr.warning('您的账号即将过期', '警告', {timeOut: 5000});

总结

Toastr.js是一个功能强大的JavaScript库，用于在Web应用程序中弹出通知。它易于使用、高度可定制，并且支持在多种框架中使用。如果你需要在你的应用程序中添加通知功能，Toastr.js就是一个很好的选择。