Toastr 开源项目使用教程

Toastr 开源项目使用教程

toastrSimple javascript toast notifications项目地址:https://gitcode.com/gh_mirrors/to/toastr

1. 项目的目录结构及介绍

Toastr 是一个简单的 JavaScript 通知库，用于创建非阻塞的通知消息。以下是 Toastr 项目的基本目录结构及其介绍：

toastr/
├── demo/
│   └── demo.html
├── build/
│   ├── toastr.js
│   └── toastr.min.js
├── css/
│   ├── toastr.css
│   └── toastr.min.css
├── gulpfile.js
├── package.json
├── README.md
└── toastr.js

• demo/: 包含演示 Toastr 功能的 HTML 文件。
• build/: 包含构建后的 JavaScript 文件，包括压缩和非压缩版本。
• css/: 包含 Toastr 的样式文件，包括压缩和非压缩版本。
• gulpfile.js: Gulp 构建脚本。
• package.json: 项目的依赖和元数据。
• README.md: 项目的介绍和使用说明。
• toastr.js: 核心的 Toastr JavaScript 文件。

2. 项目的启动文件介绍

Toastr 项目的启动文件是 toastr.js。这个文件包含了 Toastr 库的所有核心功能和 API。要使用 Toastr，你需要在你的 HTML 文件中引入这个 JavaScript 文件和相应的 CSS 文件。

<link href="path/to/toastr.css" rel="stylesheet"/>
<script src="path/to/toastr.js"></script>

3. 项目的配置文件介绍

Toastr 的配置主要通过 JavaScript 代码进行。以下是一些常用的配置选项：

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

• closeButton: 是否显示关闭按钮。
• debug: 是否启用调试模式。
• newestOnTop: 新消息是否显示在顶部。
• progressBar: 是否显示进度条。
• positionClass: 消息的位置。
• preventDuplicates: 是否防止重复消息。
• showDuration: 消息显示的持续时间。
• hideDuration: 消息隐藏的持续时间。
• timeOut: 消息显示的总时间。
• extendedTimeOut: 消息在鼠标悬停后的额外显示时间。
• showEasing: 消息显示的缓动效果。
• hideEasing: 消息隐藏的缓动效果。
• showMethod: 消息显示的方法。
• hideMethod: 消息隐藏的方法。

通过这些配置选项，你可以自定义 Toastr 的行为和外观，以满足你的具体需求。

toastrSimple javascript toast notifications项目地址:https://gitcode.com/gh_mirrors/to/toastr