toastr —— 轻量级的消息提示插件

toastr是一款轻量级的消息提示插件，基于JQuery，使用简单方便，外观大气漂亮。

点击这里进入toastr在线调试使用   

点击这里进入toastr官方网站

使用效果如下图所示：

   

---

插件使用需要引用的JS和CSS文件如下图所示：

各版本JQuery：

jquery-3.3.1.min.js

toastr文件： 

toastr.min.js
toastr.min.css

---

使用说明：

插件有四种消息类型，分别如下图所示：

toastr.info("您的手机已经欠费！", "系统提醒");//提醒
toastr.success("恭喜获得冠军！", "恭喜");//成功
toastr.warning("您已经严重超速！", "警告");//警告
toastr.error("系统崩溃！", "错误");//错误

格式：

toastr.消息类型（"消息内容","消息标题，可以省略"）

实现代码：

<script type="text/javascript">
    var toastr;
     toastr.options = {
        closeButton: true,//显示关闭按钮
        debug: false,
        progressBar: true,//显示进度条
        positionClass: "toast-bottom-center",//位置
        onclick: null,//点击消息框自定义事件
        showDuration: "300",//显示动作时间
        hideDuration: "1000",//隐藏动作时间
        timeOut: "2000",//显示时间,0为永久显示
        extendedTimeOut: "1000",//鼠标移动过后显示显示时间
        showEasing: "swing",
        hideEasing: "linear",
        showMethod: "fadeIn",//显示方式
        hideMethod: "fadeOut"//隐藏方式
     };
 
     $("#button1").click(function () {
         toastr.info("您的手机已经欠费！", "系统提醒");//提醒
     });
     $("#button2").click(function(){
         toastr.success("恭喜获得冠军！", "恭喜");//成功
     });
     $("#button3").click(function () {
         toastr.warning("您已经严重超速！", "警告");//警告
     });
     $("#button4").click(function () {
         toastr.error("系统崩溃！", "错误");//错误
     });
 
     $("#button6").click(function () {
         toastr.clear();//移除所有,有动画效果
     })
     $("#button7").click(function () {
         toastr.remove();//移除所有，没有动画效果
     })
 
</script>

参数说明：

参数	说明
closeButton	显示关闭按钮
debug	开启debug模式
progressBar	显示进度条
onclick	鼠标点击事件
showDuration	显示动作时间
hideDuration	隐藏动作时间
timeOut	显示时间,0为永久显示
extendedTimeOut	鼠标移动过后显示显示时间
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