toastr是一个基于Jquery简单、漂亮的消息提示插件。
YII2.0+默认自带Jquery消息提示插件toastr
单独引用模式:当前view视图中,引用如下:
<?=Html::jsFile('@web/js/plugins/toastr/toastr.min.js')?>
<?=Html::cssFile('@web/css/plugins/toastr/toastr.min.css')?>
参考:https://blog.csdn.net/netuser1937/article/details/100256539
使用说明:
//常规消息提示,默认背景为浅蓝色
toastr.info("常规消息!");
//成功消息提示,默认背景为浅绿色
toastr.success("成功消息!");
//警告消息提示,默认背景为橘黄色
toastr.warning("警告消息!");
//错误消息提示,默认背景为浅红色
toastr.error("错误消息!");
//带标题的消息框
toastr.success("成功消息!","成功消息提示");
toastr["info"]("常规消息!","常规消息提示");
toastr["warning"]("警告消息!","警告消息提示");
toastr["error"]("错误消息!","错误消息提示");
全局配置:
toastr.options = {
"closeButton": true,
"debug": true,
"progressBar": false,
"positionClass": "toast-top-right",
"showDuration": "400",
"hideDuration": "1000",
"timeOut": "3000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
参数名称 | 说明 | 可选项 |
---|---|---|
closeButton | 是否显示关闭按钮 | true,false |
debug | 是否使用debug模式 | true,false |
progressBar | 是否显示进度条(设置关闭的超时时间进度条) | true,false |
positionClass | 弹出窗的位置 | |
showDuration | 显示的动画时间 | |
hideDuration | 消失的动画时间 | |
timeOut | 展现时间 | |
extendedTimeOut | 加长展示时间 | |
showEasing | 显示时的动画缓冲方式 | swing |
hideEasing | 消失时的动画缓冲方式 | linear |
showMethod | 显示时的动画方式 | fadeIn |
hideMethod | 消失时的动画方式 | fadeOut |
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 | 底部中间(宽度铺满) |