您现在的位置是: 网站首页 >网页前端 网页前端

html悬浮通知toastr使用方法

admin2019年5月23日 15:20 Html | JQuery 201人已围观

# 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 ![BLOG_20190523_152125_37](/media/blog/images/2019/05/BLOG_20190523_152125_37.png "博客图集BLOG_20190523_152125_37.png")

很赞哦! (0)

文章交流

  • emoji
0人参与,0条评论

当前用户

未登录,点击   登录

站点信息

  • 建站时间:网站已运行590天
  • 系统信息:Linux
  • 后台程序:Python: 3.6.6
  • 网站框架:Django: 2.2.9
  • 文章统计:222 篇
  • 文章评论:40 条
  • 腾讯分析网站概况-腾讯分析
  • 百度统计网站概况-百度统计
  • 微信公众号:扫描二维码,关注我们
返回
顶部
标题 换行 登录
网站