当前位置: 首页 > 工具软件 > toastr > 使用案例 >

Jquery消息提示插件toastr的使用

梁丘亦
2023-12-01

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底部中间(宽度铺满)
 类似资料: