Jquery消息提示插件toastr使用详解
toastr是一个基于jQuery简单、漂亮的消息提示插件,使用简单、方便,可以根据设置的超时时间自动消失。
1、使用很简单,首选引入toastr的js、css文件
html
<script src="<%=path%>/res/toastr/toastr.min.js"></script>
<link rel="stylesheet" href="<%=path%>/res/toastr/toastr.min.css">
2、效果
3、集成使用
//常规消息提示,默认背景为浅蓝色
toastr.info("你有新消息了!");
//成功消息提示,默认背景为浅绿色
toastr.success("你有新消息了!");
//警告消息提示,默认背景为橘黄色
toastr.warning("你有新消息了!");
//错误消息提示,默认背景为浅红色
toastr.error("你有新消息了!");
//带标题的消息框
toastr.success("你有新消息了!","消息提示");
//另一种调用方法
toastr["info"]("你有新消息了!","消息提示");
4、自定义用法
通过设置自定义参数,可达到不同的效果
自定义参数:
JavaScript
toastr.options = {
closeButton: false,
debug: false,
progressBar: true,
positionClass: "toast-bottom-center",
onclick: null,
showDuration: "",
hideDuration: "",
timeOut: "",
extendedTimeOut: "",
showEasing: "swing",
hideEasing: "linear",
showMethod: "fadeIn",
hideMethod: "fadeOut"
};
参数说明:
closeButton:false,是否显示关闭按钮(提示框右上角关闭按钮);
debug:false,是否为调试;
progressBar:false,是否显示进度条(设置关闭的超时时间进度条);
positionClass,消息框在页面显示的位置
toast-top-left 顶端左边
toast-top-right 顶端右边
toast-top-center 顶端中间
toast-top-full-width 顶端,宽度铺满整个屏幕
toast-botton-right
toast-bottom-left
toast-bottom-center
toast-bottom-full-width
onclick,点击消息框自定义事件
showDuration: “”,显示动作时间
hideDuration: “”,隐藏动作时间
timeOut: “”,自动关闭超时时间
extendedTimeOut: “”
showEasing: “swing”,
hideEasing: “linear”,
showMethod: “fadeIn” 显示的方式,和jquery相同
hideMethod: “fadeOut” 隐藏的方式,和jquery相同
Jquery消息提示插件toastr使用详解的更多相关文章
- Jquery消息提示插件toastr使用
toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 相关文件到官网去下载即可 1.引入toastr的js和css文件 <link hre ...
- Jquery消息提示插件toastr
toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 <script src=&q ...
- 【转】JQuery上传插件Uploadify使用详解及错误处理
转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错 ...
- 漂亮灵活设置的jquery通知提示插件toastr
toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成 ...
- 消息提示插件toastr.js与Messenger组件
Toastr是一款基于jQuery的通知插件,可以灵活的自定义样式和拓展其功能! toastr是一个基于Jquery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. cdn最 ...
- 介绍Web项目中用到的几款JQuery消息提示插件
第一款 noty 官方网站:https://github.com/needim/noty 第二款 artDialog artDialog是一个精巧的web对话框组件,压缩后只有十多KB,并且不依赖其他 ...
- jquery图片播放插件Fancybox使用详解
今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的. Fancybox的项目主页地址:http://fa ...
- JQuery上传插件Uploadify使用详解
本文转载http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不错 ...
- (转)JQuery上传插件Uploadify使用详解
原文地址:http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不 ...
随机推荐
- SpringBoot1
内容:
- Storm入门(十三)Storm Trident 教程
转自:http://blog.csdn.net/derekjiang/article/details/9126185 英文原址:https://github.com/nathanmarz/storm/ ...
- 配置IIS网站,我遇到的那些坑~
配置错误 不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定是默认设置的(overrideModeDefault="Deny"),或者是通过包含 over ...
- Luogu P5309 [Ynoi2012]D1T1
小清新分块题,从头到尾都十分套路,和CXR大佬一起YY了一下就出来了 首先套路地设个阈值\(S\),把修改的\(x\)分成大于\(S\)和小于等于\(S\)两部分,然后我们考虑分别求解这两部分 \(x ...
- 【Python实践-1】求一元二次方程的两个解
知识点: import sys, sys模块包含了与Python解释器和它的环境有关的函数. “sys”是“system”的缩写.sys.exit() 中途退出程序, (注:0是正常退出,其他为不正常 ...
- shell脚本获取进程ID并杀死的实现及问题解析
经常需要杀死某个进程,操作了几次之后,对一个熟练的码农来说,就要制作自己的工具了.有些工具虽然很小,但是却能节省一大部分的时间. 输入某个进程的ID并杀死的方法.这种事情,一般是先搜索再进行优化,这种 ...
- AI - 深度学习之美十四章-概念摘要(8~14)
原文链接:https://yq.aliyun.com/topic/111 本文是对原文内容中部分概念的摘取记录,可能有轻微改动,但不影响原文表达. 08 - BP算法双向传,链式求导最缠绵 反向传播( ...
- 【神经网络篇】--RNN递归神经网络初始与详解
一.前述 传统的神经网络每个输入节点之间没有联系, RNN (对中间信息保留): 由图可知,比如第二个节点的输入不仅依赖于本身的输入U1,而且依赖上一个节点的输入W0,U0,同样第三个节点依赖于前两个 ...
- Python--开发简单爬虫
简单爬虫架构 动态运行流程 URL管理器的作用 URL管理器的3种实现方式 网页下载器的作用 Python网页下载器的种类 urllib2下载网页的3种方法 网页解析器的作用 Python的几种网页解 ...
- springboot~Money类型在序列化时遇到的问题与解决
在java扩展包里,有这样一个包,它可以描述货币类型,它说币种和金额组成,可以应用在任何复杂的场合里,这个对象结构如下: { "price": { "amount&quo ...