html悬浮通知toastr使用方法

# toastr悬浮通知 ```html <link href="{% static 'hadmin/css/plugins/toastr/toastr.min.css' %}" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="{% static 'hadmin/js/plugins/toastr/toastr.min.js' %}"></script> <script> toastr.options = { // toastr配置 "closeButton": true, //是否显示关闭按钮 "debug": false, //是否使用debug模式 "progressBar": true, //是否显示进度条，当为false时候不显示；当为true时候，显示进度条，当进度条缩短到0时候，消息通知弹窗消失 "positionClass": "toast-top-center",//显示位置，参考下面 "showDuration": "400", //显示的动画时间 "hideDuration": "1000", //消失的动画时间 "timeOut": "7000", //展现时间 "extendedTimeOut": "1000", //加长展示时间 "showEasing": "swing", //显示时的动画缓冲方式 "hideEasing": "linear", //消失时的动画缓冲方式 "showMethod": "fadeIn", //显示时的动画方式 "hideMethod": "fadeOut" //消失时的动画方式 } //调用方式 toastr.error("连接不能打开！"); toastr.success("连接已建立，可以进行通信！") toastr.success("连接已建立，可以进行通信！", "成功") toastr.warning("连接建立失败，请重试！") toastr.info("请先登录！") </script> ``` 位置信息，消息弹窗显示的位置，可以显示的位置对应的值 1. toast-top-right 2. toast-bottom-right 3. toash-bottom-left 4. toast-top-left 5. toast-top-full-width 这个是在网页顶端，宽度铺满整个屏幕 6. toast-bottom-full-width 7. toast-top-center 顶端中间 8. toast-bottom-center # 在线引入 ```html <link href="//cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> <script src="//cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script> ``` 在线测试链接： http://www.shouce.ren/api/jq/5733e3732c588/index.html 

明人不说暗话 领红包就是支持！！！ 来都来了，再到页面底部看下呗~ ↓ ↓ ↓

本文地址： http://blog.starmeow.cn/detail/96da2f590cd7246bbde0051047b0d6f7/

很赞哦！ (0)