Toastr 通知提示插件
Toastr 简介
jquery toastr 一款轻量级的通知提示框插件。
网页开发中经常会用到提示框,自带的alert样式无法调整,用户体验差。
所以一般通过自定义提示框来实现弹窗提示信息,而jquery toastr正是为此的一款非常棒的插件。
开发中用angular比较多,所以笔记记录了angular一些常见使用,与jquery版本有些许不同 ,相差不大。
在HTML引用js文件
<link rel="stylesheet" type="text/css" href="./static/toastr/toastr.min.css">
<script src="./static/toastr/toastr.min.js"></script>
注意:导入toastr.min.js文件欠必须要先导入jQuery原生文件
在angular模版中注入依赖
angular.module('app', ['ngAnimate', 'toastr'])
toastr使用中会用到动画,所以需加上ngAnimate,如果不引入ngAnimate,没有动画效果,不影响显示。
开始使用
1.成功提示
toastr.success('Hello world!', 'Toastr fun!');
2.普通提示
toastr.info('We are open today from 10 to 22', 'Information');
3.错误提示
toastr.error('Your credentials are gone', 'Error');
4.警告提示
toastr.warning('Your computer is about to explode!', 'Warning');
第一个参数为提示内容,第二个参数为提示标题,如果不需要标题,则可省略第二个参数
toastr.success('I don't need a title to live');
关闭提示框
toastr.clear([toast]);
获取当前显示的提示框
toastr.active();
刷新打开的提示框(第二个参数配置超时时间)
toastr.refreshTimer(toast, 5000);
全局配置
<script type="text/javascript">
toastr.options = {
closeButton: false,
debug: false,
progressBar: false,
positionClass: "toast-top-center",
onclick: null,
showDuration: "300",
hideDuration: "1000",
timeOut: "5000",
extendedTimeOut: "1000",
showEasing: "swing",
hideEasing: "linear",
showMethod: "fadeIn",
hideMethod: "fadeOut"
};
</script>
参数名称 |
说明 |
可选项 |
---|---|---|
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
- ckplayer 如何在PC上完美支持 m3u8播放
- TensorFlow-2: 用 CNN 识别数字
- js图片前端预览之 filereader 和 window.URL.createObjectURL
- TensorFlow-3: 用 feed-forward neural network 识别数字
- TensorFlow-4: tf.contrib.learn 快速入门
- TensorFlow-5: 用 tf.contrib.learn 来构建输入函数
- 前后端分离之vue2.0+webpack2 实战项目 -- html模板拼接
- 抛弃vue-resource拥抱axios
- TensorFlow-6-TensorBoard 可视化学习
- TensorFlow-7-TensorBoard Embedding可视化
- windows下nginx的安装及使用方法入门
- Scala Turtuial-容器(集合)类型
- Scala Turtuial-基本语法
- C++ Virtual And Pure Virtual Explained
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一文读懂 DEX 文件格式解析
- Guava集合--新集合类型
- 从 Node.js 到 Go
- 性能不达标,计将安出?
- Yaml 速成查询表
- 设计模式实战-策略模式,想让你的代码变幻莫测吗?
- 设计模式实战-模板模式,代码复用神器
- CSS Flexbox 布局完全指南 (二):3000字,多示例讲解
- 设计模式实战-访问者模式,减少代码体积
- Spring Security 实战干货:UsernamePasswordAuthenticationFilter 源码分析
- 打卡群刷题总结0715——旋转链表
- 设计模式实战-中介模式,为你牵桥搭线
- 设计模式实战-迭代器模式,最常用的设计模式之一
- 设计模式实战-解释器模式,今天给你解疑答惑
- 时间不再浪费评估上!ThingJS 3D可视化开发不用愁