Jquery消息提示插件toastr的使用

港控/mmm° 2024-04-17 22:36 66阅读 0赞

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][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"
        };

<table> 
 <thead> 
  <tr> 
   <th>参数名称</th> 
   <th>说明</th> 
   <th>可选项</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>closeButton</td> 
   <td>是否显示关闭按钮</td> 
   <td>true,false</td> 
  </tr> 
  <tr> 
   <td>debug</td> 
   <td>是否使用debug模式</td> 
   <td>true,false</td> 
  </tr> 
  <tr> 
   <td>progressBar</td> 
   <td>是否显示进度条（设置关闭的超时时间进度条）</td> 
   <td>true,false</td> 
  </tr> 
  <tr> 
   <td>positionClass</td> 
   <td>弹出窗的位置</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>showDuration</td> 
   <td>显示的动画时间</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>hideDuration</td> 
   <td>消失的动画时间</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>timeOut</td> 
   <td>展现时间</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>extendedTimeOut</td> 
   <td>加长展示时间</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>showEasing</td> 
   <td>显示时的动画缓冲方式</td> 
   <td>swing</td> 
  </tr> 
  <tr> 
   <td>hideEasing</td> 
   <td>消失时的动画缓冲方式</td> 
   <td>linear</td> 
  </tr> 
  <tr> 
   <td>showMethod</td> 
   <td>显示时的动画方式</td> 
   <td>fadeIn</td> 
  </tr> 
  <tr> 
   <td>hideMethod</td> 
   <td>消失时的动画方式</td> 
   <td>fadeOut</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th colspan="2">positionClass</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>toast-top-left</td> 
   <td>顶端左边</td> 
  </tr> 
  <tr> 
   <td>toast-top-right&nbsp;</td> 
   <td>顶端右边</td> 
  </tr> 
  <tr> 
   <td>toast-top-center</td> 
   <td>顶端中间</td> 
  </tr> 
  <tr> 
   <td>toast-top-full-width</td> 
   <td>顶端中间(宽度铺满)</td> 
  </tr> 
  <tr> 
   <td>toast-bottom-right&nbsp;</td> 
   <td>底部右边</td> 
  </tr> 
  <tr> 
   <td>toast-bottom-left&nbsp;</td> 
   <td>底部左边</td> 
  </tr> 
  <tr> 
   <td>toast-bottom-center&nbsp;</td> 
   <td>底部中间</td> 
  </tr> 
  <tr> 
   <td>toast-bottom-full-width</td> 
   <td>底部中间(宽度铺满)</td> 
  </tr> 
 </tbody> 
</table>

[https_blog.csdn.net_netuser1937_article_details_100256539]: https://blog.csdn.net/netuser1937/article/details/100256539