当前位置 : 主页 > 网页制作 > JQuery >

Jquery消息提示插件toastr使用详解

来源:互联网 收集:自由互联 发布时间:2021-06-15
引入: script src="/uploads/allimg/210615/1SG342E-0.jpg"/script link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" 参数配置: toastr.success( ‘Hello world!‘ , ‘Toastr fun!‘

引入:

<script src="http://img.558idc.com/uploadfile/allimg/210615/1SG342E-0.jpg"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css">

参数配置:

 

toastr.success(‘Hello world!‘‘Toastr fun!‘);  /success 、 error、info、warning 第二个参数为标题可以省略

关闭警告框

toastr.clear([toast]);

获取当前警告框

toastr.active();

刷新警告框 第二个参数为超时时间

toastr.refreshTimer(toast, 5000);

 

配置参数:

 
 

 

toastr.options = { 
closeButton: false, 
debug: false, 
progressBar: true, 
positionClass: "toast-top-center", 
onclick: null, 
showDuration: "300", 
hideDuration: "1000", 
timeOut: "2000", 
extendedTimeOut: "1000", 
showEasing: "swing", 
hideEasing: "linear", 
showMethod: "fadeIn", 
hideMethod: "fadeOut" ,
newestOnTop: true,
preventDuplicates: true,
preventOpenDuplicates: true,
maxOpened:1 ,
allowHtml: false,
closeButton: false,
closeHtml: ‘<button>×</button>‘,
extendedTimeOut: 1000,
iconClasses: {
error: ‘toast-error‘,
info: ‘toast-info‘,
success: ‘toast-success‘,
warning: ‘toast-warning‘
}, 
messageClass: ‘toast-message‘,
onHidden: null,
onShown: null,
onTap: null,
progressBar: false,
tapToDismiss: true,
templates: {
toast: ‘directives/toast/toast.html‘,
progressbar: ‘directives/progressbar/progressbar.html‘
},
timeOut: 5000,
titleClass: ‘toast-title‘,
toastClass: ‘toast‘

};

 

 

  • autoDismiss: true 显示最新的toastr
  • containerId: 默认为"toast-container",设置toastr容器的id名称.
  • maxOpened: 页面一次性最多显示多少个toastr.
  • newestOnTop: true 新的toastr会显示在旧的toastr前面
  • positionClass: 设置toastr显示位置的class
  • preventDuplicates: true 重复内容的提示框只出现一次,无论提示框是打开还是关闭
  • preventOpenDuplicates: true 重复内容的提示框在开启时只出现一个 如果当前的提示框已经打开,不会多开。直到提示框关闭后,才可再开)
  • target: 默认为‘body‘, 设置toastr的目标容器
  • allowHtml: 设置提示内容可包含html格式
  • closeButton: 设置显示"X" 关闭按钮
  • closeHtml: 自定义html替代closeButton内容,closeButton为true时才显示.
  • extendedTimeOut: 设置当你鼠标滑入后的timeout,该timeout会更新关闭所需的timeout.
  • extraData: 如果重写模版,你可以自定义全局数据给你的toasts
  • iconClasses: 设置各个类型的icon图标class
  • messageClass: 设置toastr提示信息的class
  • progressBar: 设置显示timeout时间进度条
  • tapToDismiss: 设置toastr被点击时关闭
  • templates: 自定义模版
  • timeOut: 设置toastr过多久关闭
  • titleClass: 设置toastr标题的class
  • toastClass: 设置toastr基本的class
网友评论