我的博客

toastr悬浮通知

<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-botton-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

在线引入

<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