消息提示插件：toastr.js

柔光的暖阳◎ 2022-06-08 05:12 372阅读 0赞

**toastr.js插件的特点：**

toastr.js是一个基于[jQuery][]的非阻塞、简单、漂亮的消息提示插件，使用简单、方便。

toastr.js可以设置四种提示样式：成功(success)、错误(error)、提示(info)、警告(warning)。

可以通过设置参数来设置提示窗口显示的位置、显示的动画等。

**调用toastr.js插件之前需要先引入jquery.js     toastr.js       toastr.css**

注意：toastr.js是基于jquery.js库，所以必须在toastr.js之前引入jquery.js

**一、在.js中直接调用：**

1、常规消息提示，背景色为浅蓝色：

toastr.info('你有新消息了！')

显示效果：

![Center][]

2、成功消息提示，背景色为浅绿色：

toastr.success('你有新消息了！');

显示效果：

![Center 1][]

3、警告消息提示，背景色为橘黄色：

toastr.warning('你有新消息了！');

显示效果：

![Center 2][]

4、错误消息提示，背景色为红色：

toastr.error('你有新消息了！');

显示效果：

![Center 3][]

注意可以让消息框带标题：

toastr.error('你有新消息了！'，‘错误提示框’);

**二、自定义用法，设定参数，达到不同效果**

1、首先设定参数：

toastr.options = { closeButton: false, // 是否显示关闭按钮，（提示框右上角关闭按钮） debug: false, // 是否使用deBug模式 progressBar: true, // 是否显示进度条，（设置关闭的超时时间进度条） positionClass: "toast-bottom-center", // 设置提示款显示的位置 onclick: null, // 点击消息框自定义事件  showDuration: "300", // 显示动画的时间 hideDuration: "1000", // 消失的动画时间 timeOut: "2000", // 自动关闭超时时间  extendedTimeOut: "1000", // 加长展示时间 showEasing: "swing", // 显示时的动画缓冲方式 hideEasing: "linear", // 消失时的动画缓冲方式 showMethod: "fadeIn", // 显示时的动画方式 hideMethod: "fadeOut" // 消失时的动画方式 };

调用插件：(四种方法都可以用)

toastr.warning('你有新消息了！');           toastr.success('你有新消息了！');              toastr.error('你有新消息了！');      toastr.info('你有新消息了！');

**三、自定义参数，将提示框进行封装**

1、对toastr.error()函数的封装

function error_prompt_alert(content) {

//设定参数 toastr.options = { closeButton: false, debug: false, progressBar: false, positionClass: "toast-top-center", onclick: null, showDuration: "300", hideDuration: "1000", // timeOut: "1500", extendedTimeOut: "1000", showEasing: "swing", hideEasing: "linear", showMethod: "fadeIn", hideMethod: "fadeOut" }; if (content == null) { content = ''; } var len = content.length; if (len <= 10 && len > 0) { toastr.options.timeOut = "1800"; } else if (len <= 20) { toastr.options.timeOut = "2800"; } else if (len <= 30) { toastr.options.timeOut = "3800"; } else if (len > 30) { toastr.options.timeOut = "4800"; }

//调用插件 toastr.error(content); }

用法： error\_prompt\_alert（‘错误’）；

2、对toastr.success()函数的封装

[jQuery]: http://lib.csdn.net/base/jquery
[Center]: /images/20220608/2838c8d26d764bf986bcca6ed6145506.png
[Center 1]: /images/20220608/4f80d984d3c044e59cad55aa92b004ed.png
[Center 2]: /images/20220608/d529586f429e4391bbd4279e016627e6.png
[Center 3]: /images/20220608/27b37d4a94f3442092260d828de2dd8e.png