Toastr消息通知插件

    这次做的小项目中使用了这么一个图形优美，又可以友好的弹出一个对话框的这么一个基于JQuery的小插件，使用起来超级方便哦！！！  可以先看下toastr的模板样例，是不是符合你需求------>http://www.jq22.com/yanshi476

   说下怎么使用吧，超级简单，在这里就当作是做个记录了！！

   首先是导入那些css跟jquery（注意，这里一定要注意以下顺序 ：导入jquery文件，一定要比toastr.min.js先导入）

<!--导入toastr的css文件-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/toastr.min.css">

<!--导入jquery文件，注意一定要比toastr.min.js先导入-->
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>

<!--导入toastr的toastr.min.js文件-->
<script src="${pageContext.request.contextPath}/css/toastr.min.js"></script>

<script>
$(function () {
//toastr的配置信息
    toastr.options = {
    closeButton: false, //是否显示关闭按钮
    debug: false, //是否使用debug模式
    progressBar: false,
    positionClass: "toast-bottom-full-width", //弹出窗的位置
    onclick: null,
    showDuration: "1000", //显示的动画时间
    hideDuration: "1000", //消失的动画时间
    timeOut: "2000", //展现时间
    extendedTimeOut: "1000", //加长展示时间
    showEasing: "swing", //显示时的动画缓冲方式
    hideEasing: "linear", //消失时的动画缓冲方式
    showMethod: "fadeIn", //显示时的动画方式
    hideMethod: "fadeOut" //消失时的动画方式
  };

//接下来就可以开始使用这个插件了
toastr.success("商品信息删除成功了！！");

}
</script>

  然后就是那些具体参数的配置，这里你可以参考下toastr的模板样例------>http://www.jq22.com/yanshi476

通过这个网址你可以体验下这个插件的魅力，也可以调配参数

 

附：下载地址https://codeseven.github.io/toastr/