Jquery消息提示插件toastr使用详解

￡神魔★判官ぃ 2023-06-18 07:54 13阅读 0赞

toastr是一个基于Jquery简单、漂亮的消息提示插件，使用简单、方便，可以根据设置的超时时间自动消失。

#### 1、使用很简单，首选引入toastr的js、css文件 ####

在html中引入相关js和css

[下载地址][Link 1]  
提取码：2dau

#### 2、效果 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tfeW91bmcxOTk3_size_16_color_FFFFFF_t_70]

#### 3、使用 ####

//常规消息提示，默认背景为浅蓝色 
    toastr.info("你有新消息了!");

//成功消息提示，默认背景为浅绿色 
    toastr.success("你有新消息了!");

//警告消息提示，默认背景为橘黄色 
    toastr.warning("你有新消息了!");

//错误消息提示，默认背景为浅红色 
    toastr.error("你有新消息了!");

//带标题的消息框
    toastr.success("你有新消息了!","消息提示");

//另一种调用方法
    toastr["info"]("你有新消息了!","消息提示");

#### 4、自定义使用 ####

toastr.options = {   
            closeButton: false,  
            debug: false,  
            progressBar: true,  
            positionClass: "toast-bottom-center",  
            onclick: null,  
            showDuration: "300",  
            hideDuration: "1000",  
            timeOut: "2000",  
            extendedTimeOut: "1000",  
            showEasing: "swing",  
            hideEasing: "linear",  
            showMethod: "fadeIn",  
            hideMethod: "fadeOut"  
        };

##### 参数说明： #####

*  closeButton：false，是否显示关闭按钮（提示框右上角关闭按钮)
 *  debug：false，是否为调试
 *  progressBar：false，是否显示进度条（设置关闭的超时时间进度条)
 *  positionClass，消息框在页面显示的位置
 *  onclick，点击消息框自定义事件
 *  showDuration: “300”，显示动作时间
 *  hideDuration: “1000”，隐藏动作时间
 *  timeOut: “2000”，自动关闭超时时间
 *  extendedTimeOut: “1000”
 *  showEasing: “swing”,
 *  hideEasing: “linear”,
 *  showMethod: “fadeIn” 显示的方式，和jquery相同
 *  hideMethod: “fadeOut” 隐藏的方式，和jquery相同

其中`positionClass`参数值可以为一下几种：

> toast-top-left 顶端左边  
> toast-top-right 顶端右边  
> toast-top-center 顶端中间  
> toast-top-full-width 顶端，宽度铺满整个屏幕  
> toast-botton-right  
> toast-bottom-left  
> toast-bottom-center  
> toast-bottom-full-width

本文参考自:https://blog.csdn.net/cyh1111/article/details/53141037

[Link 1]: https://pan.baidu.com/s/1zDFRjOkoSphYl3NDfWVDag
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tfeW91bmcxOTk3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191201102330118.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tfeW91bmcxOTk3,size_16,color_FFFFFF,t_70