Jquery消息提示插件toastr的使用

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底部中间(宽度铺满)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值