Toastr 通知提示插件
Toastr 简介
jquery toastr 一款轻量级的通知提示框插件。
网页开发中经常会用到提示框,自带的alert样式无法调整,用户体验差。
所以一般通过自定义提示框来实现弹窗提示信息,而jquery toastr正是为此的一款非常棒的插件。
开发中用angular比较多,所以笔记记录了angular一些常见使用,与jquery版本有些许不同 ,相差不大。
在HTML引用js文件
1 2 |
|
注意:导入toastr.min.js文件欠必须要先导入jQuery原生文件
在angular模版中注入依赖
1 |
|
toastr使用中会用到动画,所以需加上ngAnimate,如果不引入ngAnimate,没有动画效果,不影响显示。
开始使用
1.成功提示
1 |
|
2.普通提示
1 |
|
3.错误提示
1 |
|
4.警告提示
1 |
|
第一个参数为提示内容,第二个参数为提示标题,如果不需要标题,则可省略第二个参数
1 |
|
关闭提示框
1 |
|
获取当前显示的提示框
1 |
|
刷新打开的提示框(第二个参数配置超时时间)
1 |
|
全局配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
参数名称 | 说明 | 可选项 |
---|---|---|
closeButton | 是否显示关闭按钮 | true,false |
debug | 是否使用debug模式 | true,false |
positionClass | 弹出窗的位置 | 具体见下文 |
showDuration | 显示的动画时间 | |
hideDuration | 消失的动画时间 | |
timeOut | 展现时间,显示的时间 | |
extendedTimeOut | 加长展示时间 | |
showEasing | 显示时的动画缓冲方式 | swing |
hideEasing | 消失时的动画缓冲方式 | linear |
showMethod | 显示时的动画方式 | fadeIn |
hideMethod | 消失时的动画方式 | fadeOut |
positionClass | |
---|---|
toast-top-left | 顶端左边 |
toast-top-right | 顶端右边 |
toast-top-center | 顶端中间 |
toast-top-full-width | 顶端中间(宽度铺满) |
toast-bottom-right | 底部右边 |
toast-bottom-left | 底部左边 |
toast-bottom-center | 底部中间 |
toast-bottom-full-width | 底部中间(宽度铺满) |
参考文章:
jquery: https://github.com/CodeSeven/toastr
angular: https://github.com/Foxandxss/angular-toastr
Toastr 通知提示插件相关推荐
- 雷鸟客户端关闭后有新邮件通知提示插件——雷鸟最小化插件
插件效果: 如上图. 插件作用:最小化或关闭后,保留在右下角工具栏中,新邮件仍有提示. 插件名称:MinimizeToTray Reanimated ps:这个插件不适用于 ver 68.6.0以上版 ...
- 一款轻量级的消息提示插件 —— toastr
toastr是一款轻量级的消息提示插件,基于JQuery,使用简单方便,外观大气漂亮. 点击这里进入toastr在线调试使用 点击这里进入toastr官方网站 使用效果如下图所示: 插件使用需要引用的 ...
- Jquery消息提示插件toastr使用详解
toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 html <script ...
- SpringCloud工作笔记059---Jquery消息提示插件toastr使用详解
JAVA技术交流QQ群:170933152 toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.c ...
- python测试开发django-128.Jquery消息提示插件toastr使用
前言 toastr.js是一个基于jQuery的非阻塞.简单.漂亮的消息提示插件,使用简单.方便.可以通过设置参数来设置提示窗口显示的位置.显示的动画等. toastr.js可以设置四种提示样式: 成 ...
- Jquery消息提示插件toastr
toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 <script src=&q ...
- Toastr消息提示框的使用
toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 <script type=& ...
- 一款腾讯UED设计的提示插件(使用教程)
这是一款腾讯UED设计的提示插件,看着肯定很眼熟吧,闲话不多说,直接上demo吧. 显示 ZENG.msgbox.show(提示信息,图标类型); 隐藏: ZENG.msgbox._hide(); 几 ...
- 仿桌面通知pnotify插件
在做网站的时候,alert弹出框是非常常见的情形.但是,有些情况下,弹框对用户来说是并不友好的.调研了几个其他的提示插件了,发现pnotify比较好用,可配置性也高. 使用示例: <!DOCTY ...
- php通知前端,HTML5桌面通知提示功能的实现
HTML5赋予网页更好的意义和结构.更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序.对用户都更有价值的数据驱动的Web.本文我们就和大家分享HTML5实现桌面通知提示功能. ...
最新文章
- 2022-2028年中国美瞳行业应用市场需求及开拓机会研究报告
- 读CLR via C#总结(9) 索引器(有参属性)
- oracle编写备份数据库代码,oracle_oracle数据库创建备份与恢复脚本整理,1:创建用户 复制代码 代码如 - phpStudy...
- C语言/C++中strcpy_s函数
- 教你快速学习PID控制原理
- B站 下载版权保护视频
- js 彻底理解回调函数
- SpringBoot导出txt文件
- 嵌入式技术基础与实践(第三版)笔记
- 出色不如走运全文第二部分
- Android之TextView
- Python代码在Pycharm中不起作用,但在Jupiter Notebook中执行良好
- 揭秘篇:架构腐化之谜
- Web of Science 检索使用教程
- Basic English : Speaking
- 深圳楼价下跌是天大的笑话
- 阿普奇 E7系列 工控机——MinipiceCAN卡在送餐机器人中的应用
- ECLIPSE 安装及与CDT 的使用
- 新媒体运营教程:运营活动推广的几个技巧!
- 双目客流统计系统对商超有多重要?