Jquery消息提⽰插件toastr使⽤详解引⼊:
<script src="cdn.bootcss/toastr.js/latest/js/toastr.min.js"></script>
<link rel="stylesheet" type="text/css" href="cdn.bootcss/toastr.js/latest/css/toastr.min.css">
参数配置:
toastr.success('Hello world!', 'Toastr fun!'); /success 、 error、info、warning 第⼆个参数为标题可以省略
关闭警告框
toastr.clear([toast]);
获取当前警告框
toastr.active();
刷新警告框第⼆个参数为超时时间
配置参数:
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
target: 默认为'body', 设置toastr的⽬标容器
jquery插件分享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
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论