toastr是一款非常棒的基于jquery库的非阻塞通知提示插件，toastr可设定四种通知模式：成功，出错，警告，提示，而提示窗口的位置，动画效果都可以通过能数来设置。toastr需要jquery的支持。今天我们就开始toastr的学习。
demo效果展示以及GitHub地址：https://codeseven.github.io/toastr/demo.html
使用方法
1、引入jquery库和toastr的核心文件：
toastr的下载地址： http://codeseven.github.io/toastr/
jquery的下载地址：http://jquery.com/download/
CDN镜像：https://www.bootcdn.cn/toastr.js/
<link href="toastr.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-2.2.4.min.js" ></script>
<script type="text/javascript" src="toastr.js" ></script>
jquery-2.2.4.min.js要在toastr.js之前引入。
2、写入html代码，这里只需写入触发事件的按钮。
<button id="button1">成功</button>
3、给按钮绑定事件
$('#button2').click(function () {
toastr.error("hello world.");
});
4、集成使用
//常规消息提示，默认背景为浅蓝色
toastr.info("你有新消息了!");
//成功消息提示，默认背景为浅绿色
toastr.success("你有新消息了!");
//警告消息提示，默认背景为橘黄色
toastr.warning("你有新消息了!");
//错误消息提示，默认背景为浅红色
toastr.error("你有新消息了!");
//带标题的消息框
toastr.success("你有新消息了!","消息提示");
//另一种调用方法
toastr["info"]("你有新消息了!","消息提示")效果：
5、自定义用法
你也可以修改toastr显示的方式和位置（https://codeseven.github.io/toastr/demo.html），toastr.options是全局的。
$('#button1').click(function () {
toastr.options = {
closeButton: false,
debug: false,
progressBar: false,
positionClass: "toast-top-center",
onclick: null,
showDuration: "300",
hideDuration: "1000",
timeOut: "5000",
extendedTimeOut: "1000",
showEasing: "swing",
hideEasing: "linear",
showMethod: "fadeIn",
hideMethod: "fadeOut"
};
toastr.info("hello world.");
});各参数说明：
| 参数名称 | 说明 | 可选项 |
|---|---|---|
| closeButton | 是否显示关闭按钮 | true,false |
| debug | 是否使用debug模式 | true,false |
| positionClass | 弹出窗的位置 | 具体见下文 |
| showDuration | 显示的动画时间 | |
| hideDuration | 消失的动画时间 | |
| timeOut | 展现时间 | |
| extendedTimeOut | 加长展示时间 | |
| showEasing | 显示时的动画缓冲方式 | swing |
| hideEasing | 消失时的动画缓冲方式 | linear |
| showMethod | 显示时的动画方式 | fadeIn |
| hideMethod | 消失时的动画方式 | fadeOut |
positionClass参数补充：
| positionClass | 描述 |
|---|---|
| toast-top-left | 顶端左边 |
| toast-top-right | 顶端右边 |
| toast-top-center | 顶端中间 |
| toast-top-full-width | 顶端中间(宽度铺满) |
| toast-bottom-right | 底部右边 |
| toast-bottom-left | 底部左边 |
| toast-bottom-center | 底部中间 |
| toast-bottom-full-width | 底部中间(宽度铺满) |
测试的全部代码：
<!doctype html>
<html>
<head>
<link href="toastr.min.css" rel="stylesheet" type="text/css"/>
<title>huhx</title>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
<script type="text/javascript" src="jquery-2.2.4.min.js" ></script>
<script type="text/javascript" src="toastr.js" ></script>
<script type="text/javascript">
$('#button1').click(function () {
toastr.options = {
closeButton: false,
debug: false,
progressBar: false,
positionClass: "toast-top-center",
onclick: null,
showDuration: "300",
hideDuration: "1000",
timeOut: "5000",
extendedTimeOut: "1000",
showEasing: "swing",
hideEasing: "linear",
showMethod: "fadeIn",
hideMethod: "fadeOut"
};
toastr.info("hello world.");
});
$('#button2').click(function () {
toastr.error("hello world.");
});
$('#button3').click(function () {
toastr.clear();
});
</script>
</body>
</html>显示效果如下：
6、toastr.xxx()方法有三个参数，第一个是显示的信息，第二个是标题，第三个是默认属性的重写(当然这个实现是局部的)。例子如下：
toastr.info('hello world.', '标题', {positionClass: 'toast-top-center'})
运行的效果如下：
第一个参数为提示内容，第二个参数为提示标题，如果不需要标题，则可省略第二个参数
toastr.info('hello world.');
关闭提示框
toastr.clear([toast]);
获取当前显示的提示框
toastr.active();
刷新打开的提示框（第二个参数配置超时时间）
toastr.refreshTimer(toast, 5000);
这里列出可以重写的属性：以下默认的属性都可以作为toastr.xxx的第三个参数重写。
function getDefaults() {
return {
tapToDismiss: true,
toastClass: 'toast',
containerId: 'toast-container',
debug: false,
showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery
showDuration: 300,
showEasing: 'swing', //swing and linear are built into jQuery
onShown: undefined,
hideMethod: 'fadeOut',
hideDuration: 1000,
hideEasing: 'swing',
onHidden: undefined,
closeMethod: false,
closeDuration: false,
closeEasing: false,
closeOnHover: true,
extendedTimeOut: 1000,
iconClasses: {
error: 'toast-error',
info: 'toast-info',
success: 'toast-success',
warning: 'toast-warning'
},
iconClass: 'toast-info',
positionClass: 'toast-top-right',
timeOut: 5000, // Set timeOut and extendedTimeOut to 0 to make it sticky
titleClass: 'toast-title',
messageClass: 'toast-message',
escapeHtml: false,
target: 'body',
closeHtml: '<button type="button">×</button>',
closeClass: 'toast-close-button',
newestOnTop: true,
preventDuplicates: false,
progressBar: false,
progressClass: 'toast-progress',
rtl: false
};
}原文地址：http://www.cnblogs.com/huhx/p/jsThirdToastr.html
转载请注明： ITTXX.CN--分享互联网 » jQuery消息提示插件toastr.js使用详解
最后更新：2018-10-22 16:08:13