显示 toastr 错误 - Javascript

当我们在开发javascript程序时，经常需要在网页上显示一些提示信息。这时可以使用toastr库。

什么是 toastr

toastr是一个简单易用，但功能强大的javascript通知插件。它可以轻松地向用户显示弹出式通知，包括消息、信息、警告和错误等。

如何使用 toastr

在使用toastr之前，需要先引入它的源文件。可以在html文件中添加如下代码：

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

然后，在javascript代码中就可以使用toastr了。以下是一个显示错误信息的示例：

toastr.error('发生错误');

详细使用

各种通知类型

toastr有以下几种类型的通知：

• 成功：toastr.success('成功信息')
• 错误：toastr.error('错误信息')
• 警告：toastr.warning('警告信息')
• 信息：toastr.info('普通信息')

自定义选项

你可以使用各种选项来自定义toastr的外观和行为，如下所示：

toastr.options = {
  "closeButton": false,
  "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的通知可以自动关闭，也可以手动关闭。以下是手动关闭通知的示例：

var toast = toastr.error('错误信息');
setTimeout(function() {
  toastr.clear(toast);
}, 5000);

总结

toastr是一个非常方便的javascript通知库，可以轻松地向用户显示各种类型的通知。可以通过自定义选项来实现更多的需求。