jquery toastr 一款轻量级的通知提示框插件。
一般通过自定义提示框来实现弹窗提示信息,jquery toastr是一款非常棒的插件。
插件下载地址:http://codeseven.github.io/toastr/(可在此地址下载插件)
使用demo地址:http://codeseven.github.io/toastr/demo.html(可获取toastr不同的配置方式)
注意:导入toastr.min.js文件必须要先导入jQuery原生文件
<script src="./assets/js/jquery-2.1.4.min.js"></script><!-- jquery文件 -->引入核心文件 <link rel="stylesheet" type="text/css" href="./assets/js/toastr.min.css"> <script src="./assets/js/toastr.min.js"></script> js代码 <script type="text/javascript"> toastr.options = { closeButton: false, //是否显示关闭按钮 debug: false, //是否使用debug模式 progressBar: false, positionClass: "toast-top-center", //弹出窗的位置 onclick: null, showDuration: "300", //显示的动画时间 hideDuration: "1000", //消失的动画时间 timeOut: "2000", //展现时间 extendedTimeOut: "1000", //加长展示时间 showEasing: "swing", //显示时的动画缓冲方式 hideEasing: "linear", //消失时的动画缓冲方式 showMethod: "fadeIn", //显示时的动画方式 hideMethod: "fadeOut" //消失时的动画方式 }; </script>
调用 toastr.success("操作成功"); toastr.error("操作失败"); toastr.info("info"); toastr.warning("warning); positionClasstoast-top-left顶端左边toast-top-right 顶端右边toast-top-center顶端中间toast-top-full-width顶端中间(宽度铺满)toast-bottom-right 底部右边toast-bottom-left 底部左边toast-bottom-center 底部中间toast-bottom-full-width底部中间(宽度铺满)