显示 toastr 成功 - JavaScript

在 JavaScript 中，有时我们需要在页面上显示一些提示信息，例如成功发送表单或加载完毕等。而 toastr 可以很好地帮助我们在页面上显示这些提示信息。

何为 toastr

toastr 是一款基于 jQuery 的 JavaScript 库，它可以在页面上以漂亮的样式显示提示信息。toastr 提供了丰富的 API，包括自定义样式、自定义位置等。

如何使用 toastr

要在页面上显示 toastr，我们需要在页面中引入 toastr 的 js 文件，同时在需要显示 toastr 的代码中调用相应的函数即可。

引入 toastr 文件

我们可以在 HTML 中通过如下方式引入 toastr 的 js 文件：

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

这里我们使用了 toastr 的 CDN 地址，也可以将 toastr 的 js 文件下载到本地，并在 HTML 中引入。

调用 toastr

在页面中调用 toastr，我们可以使用如下代码：

toastr.success('消息发送成功');

这里我们调用了 toastr 的 success 函数，并传入了要显示的消息。

toastr 还提供了其他几个函数，包括 info、warning、error，我们可以根据需要选择使用相应的函数。

自定义 toastr

toastr 还提供了丰富的 API，我们可以自定义 toastr 的样式、位置等。例如，我们可以按照如下方式自定义 toastr 的样式：

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 的位置为右上角，并将自动关闭时间设置为 5 秒钟。

总结

toastr 可以很好地帮助我们在页面上显示提示信息，使页面交互更加友好。我们可以根据需要自定义 toastr 的样式、位置等。