简单好用的消息通知插件toastr

toastr是一款简单方便的基于jquery库的非阻塞通知提示插件，它可以直接通过参数来设置所以的样式设置，使用非常方便：

目录

---

引入核心文件

• jquery.min.js
• toastr.min.js
• toastr.min.css
  

  ---

效果展示

---

示例

    toastr.options = {                closeButton: false,                debug: false,                progressBar: true,                positionClass: "toast-top-full-width",                onclick: null,                showDuration: "300",                hideDuration: "1000",                timeOut: "2000",                extendedTimeOut: "1000",                showEasing: "swing",                hideEasing: "linear",                showMethod: "fadeIn",                hideMethod: "fadeOut"            };            toastr["success"]("标题", "内容");

直接调用以上js代码即可实现弹出框效果。

---

各参数说明

参数名称 说明 可选项 closeButton 是否显示关闭按钮 true,false debug 是否使用debug模式 true,false positionClass 弹出窗的位置 具体见下文 showDuration 显示的动画时间 hideDuration 消失的动画时间 timeOut 展现时间 extendedTimeOut 加长展示时间 showEasing 显示时的动画缓冲方式 swing hideEasing 消失时的动画缓冲方式 linear showMethod 显示时的动画方式 fadeIn hideMethod 消失时的动画方式 fadeOut

positionClass参数补充

toast-top-right
toast-botton-right
toash-bottom-left
toast-top-left
toast-top-full-width 这个是在网页顶端，宽度铺满整个屏幕
toast-bottom-full-width
toast-top-center顶端中间
toast-bottom-center

---

样式设定

toastr[‘error’](‘I am yanying’, ‘title’);
其中的error为显示的通知的样式类型，有4种选择
-success 成功，绿色
-info 信息，蓝色
-warning，警告，橙色
-error，错误，深红色

源码下载

https://github.com/lioyan1994111/component