Git下载地址 https://github.com/CodeSeven/toastr
引用css
<link rel="stylesheet" href="css/toastr.min.css">
引用js,同时需引用jquery,因为toastr依赖jquery
<script src="js/jquery-3.1.1.min.js"></script> <script src="js/toastr.min.js"></script>
简单使用方法
$("body").on("click","#showtoast",function(event){ var i = -1; var toastCount = 0; var toastIndex = toastCount ; var $toastlast; toastr.options = { debug: true, closeButton: true, progressBar: true, positionClass: "toast-bottom-right", onclick: null, showMethod: "show", hideMethod: "hide", showDuration: 1000, hideDuration: 1000, timeOut: 5000, extendedTimeOut: 1000, }; var $toast = toastr["success"]("内容", "标题"); $toastlast = $toast; })
主要提供了四种样式
var $toast = toastr["success"]("内容", "标题");
success:成功,颜色是绿色
info:提示,颜色是蓝色
warning:警告,颜色黄色
error:错误,颜色红色
说一下重要的配置选项
toastr.options = { debug: true, closeButton: true, progressBar: true, positionClass: "toast-bottom-right", onclick: null, showMethod: "show", hideMethod: "hide", showDuration: 1000, hideDuration: 1000, timeOut: 5000, extendedTimeOut: 1000, };
配置 | 说明 | 值 |
debug | 是否开启调试 | true或者false |
closeButton | 是否显示关闭按钮 | true或者false |
progressBar | 是否显示进度条 | true或者false |
positionClass | 消息位置 | toast-top-full-width:顶部全宽 toast-top-left:左上角 toast-top-center:顶部居中 toast-top-right:右上角 toast-bottom-left:左下角 toast-bottom-center:底部居中 toast-bottom-right:右下角 toast-bottom-full-width:底部全宽 |
showMethod | 显示动作 | show(显示) fadeIn(淡入) slideDown(从下往上显示) |
timeOut | 消息显示时间 | 单位毫秒 |
hideMethod | 隐藏动作 | hide(隐藏) fadeOut(淡出) slideDup(从上往下隐藏) |
extendedTimeOut | 鼠标移上去又移出后,多久关闭消息框 | 单位毫秒 |
showDuration | 显示动作时间 | 单位毫秒,必须是整 型,取值时用parseInt |
hideDuration | 隐藏动作时间 | 单位毫秒,必须是整 型,取值时用parseInt |