html toastr.js 悬浮通知(h5 toast 提示)
2023-03-07 09:44:54 时间
资源地址
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:
<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. 调用:
<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 (弹框信息显示位置)可选项:
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 底部中间
使用效果
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的