Jquery消息提示插件toastr的使用

最新推荐文章于 2025-10-14 07:34:02 发布

原创最新推荐文章于 2025-10-14 07:34:02 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery #toastr

WEB前端专栏收录该内容

114 篇文章

订阅专栏

本文介绍如何在YII2框架中使用toastr消息提示插件，包括基本用法、不同类型的提示信息及全局配置方法，帮助开发者快速掌握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.youkuaiyun.com/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	底部中间(宽度铺满)