消息提示插件toastr详细使用说明和下载
原创 jquery toastr 2020-05-22 09:22:09
2 收藏 2 浏览2494 评论0
青柠夏夏
已发1篇
有侵犯版权请及时联系我们,我们将在24小时内删除文章。
投诉举报


Image 7.png

本站下载地址:https://www.yusan.cn/sucai/43.html

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


评论(0) 我要评论