前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >html toastr.js 悬浮通知(h5 toast 提示)

html toastr.js 悬浮通知(h5 toast 提示)

作者头像
卓越笔记
发布2023-02-18 16:31:34
4.7K0
发布2023-02-18 16:31:34
举报
文章被收录于专栏:卓越笔记卓越笔记

资源地址

github: https://github.com/CodeSeven/toastr

官网:https://codeseven.github.io/toastr/

cdn 资源地址:https://www.bootcdn.cn/toastr.js/

在线测试地址:http://www.shouce.ren/api/jq/5733e3732c588/index.html

使用步骤

1. 引入相关文件,需要引入  jquery:

代码语言:javascript
复制
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>

2. 调用:

代码语言:javascript
复制
<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.warning("失败")
    toastr.info("你好")
</script>

positionClass (弹框信息显示位置)可选项:

代码语言:javascript
复制
toast-top-right 顶部右边
toast-botton-right 底部右边
toash-bottom-left 底部左边
toast-top-left 顶部左边
toast-top-full-width 顶部宽度铺满整个屏幕
toast-bottom-full-width 底部宽度铺满整个屏幕
toast-top-center 顶端中间
toast-bottom-center 底部中间

使用效果

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-10-30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 资源地址
  • 使用步骤
  • 使用效果
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档