toastr提示插件_2018-06-28

1 使用

1.1 导入插件

1.2 添加按钮

1.3 添加点击事件

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

2 配置

2.1 修改默认设置

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 效果函数

方法	描述
animate()	对被选元素应用“自定义”的动画
clearQueue()	对被选元素移除所有排队的函数（仍未运行的）
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()	运行被选元素的下一个排队函数
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
hide()	隐藏被选的元素
queue()	显示被选元素的排队函数
show()	显示被选的元素
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	对被选元素进行滑动隐藏和滑动显示的切换
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止在被选元素上运行动画
toggle()	对被选元素进行隐藏和显示的切换