1 使用

1.1 导入插件

    <link href="toastr.min.css" rel="stylesheet" type="text/css"/>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="toastr.min.js" ></script>

1.2 添加按钮

    <input type="button" name="success" id="success" value="成功"/>
    <input type="button" name="info" id="info" value="提示"/>
    <input type="button" name="warning" id="warning" value="警告"/>

1.3 添加点击事件

    // 普通调用
    $("#success").click(function(){
        toastr.success("祝贺你成功了");
    })
    // 带标题的提示
    $("#info").click(function(){
      toastr.info("我是信息","标题");
    })
    // 其他调用方式
    $("#warning").click(function(){
      toastr["warning"]("我是消息体","我是标题");
    })

2 配置

2.1 修改默认设置

    <script type="text/javascript">
        //参数设置，若用默认值可以省略以下面代码
        $(function(){
            toastr.options = {
                "closeButton": true, //是否显示关闭按钮
                "debug": false, //是否使用debug模式
                "positionClass": "toast-top-center",//弹出窗的位置
                "showDuration": "300",//显示的动画时间
                "timeOut": "2000", //展现时间
                "hideDuration": "500",//消失的动画时间
                "extendedTimeOut": "1000",//加长展示时间
                "showEasing": "swing",//显示时的动画缓冲方式
                "hideEasing": "linear",//消失时的动画缓冲方式
                "showMethod": "fadeIn",//显示时的动画方式
                "hideMethod": "fadeOut" //消失时的动画方式
            };
        });
    </script>

2.2 弹出框位置

• positionClass

    .toast-top-center {
      top: 0;
      right: 0;
      width: 100%;
    }
    .toast-bottom-center {
      bottom: 0;
      right: 0;
      width: 100%;
    }
    .toast-top-full-width {
      top: 0;
      right: 0;
      width: 100%;
    }
    .toast-bottom-full-width {
      bottom: 0;
      right: 0;
      width: 100%;
    }
    .toast-top-left {
      top: 12px;
      left: 12px;
    }
    .toast-top-right {
      top: 12px;
      right: 12px;
    }
    .toast-bottom-right {
      right: 12px;
      bottom: 12px;
    }
    .toast-bottom-left {
      bottom: 12px;
      left: 12px;
    }

2.3 动画效果

这里使用的是jquery的效果函数

  "showEasing": "swing",//显示时的动画缓冲方式
  "hideEasing": "linear",//消失时的动画缓冲方式
  "showMethod": "fadeIn",//显示时的动画方式
  "hideMethod": "fadeOut", //消失时的动画方式

2.4 jQuery 效果函数