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的一个上传插件,实现的效果非常不 ...
随机推荐
- 基于后端云的Android注册登录开发
APP开发离不开注册登录功能,但是注册登录功能开发需要后台数据库的支持,对于一些初学者或者对后台数据 不熟悉的同学来说可能会有些困难.本文介绍一下后端云: 1. Bmob是国内起步较早的云后端服务平台 ...
- Git 中 .gitignore 的配置语法
一.前言 在日常的开发中,当我们需要将一个项目提交到 Git 时,并不是所有的文件都需要提交,比如一些自动生成的文件,类似于 .idea 文件.class 文件等,这时候就可以使用.gitignore ...
- Unsupported major.minor version 52.0解决办法
一.错误现象:当改变了jdk版本时,在编译java时,会遇到Unsupported major.minor version错误.jdk版本和stanford parser对应关系 JDK版本和Java ...
- 福利:1H1G2M云服务器限时15元/月,买2送1,一年加6个月只要180元
平时看文章做测试只能用虚拟机的有福了,现在腾迅做活动,1H1G2M的服务器一个月只需要15元,买2送1,最多可以送6个月. 这个比之前1H1G1M10元一月的要好一些 购买地址
- 【机器学习】--主成分分析PCA降维从初识到应用
一.前述 主成分分析(Principal Component Analysis,PCA), 是一种统计方法.通过正交变换将一组可能存在相关性的变量转换为一组线性不相关的变量,转换后的这组变量叫主成分. ...
- height:auto 火狐没边框
css高度设置为auto后,设置的边框 ie正常 火狐 就没有边框了,解决方法 之前是这样写的 #right_bottom { width: 790px; height:auto; border: # ...
- 机器学习中如何处理不平衡数据(imbalanced data)?
推荐一篇英文的博客: 8 Tactics to Combat Imbalanced Classes in Your Machine Learning Dataset 1.不平衡数据集带来的影响 一个不 ...
- 【Android Studio安装部署系列】九、Android Studio常用配置以及快捷键
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 整理Android Studio的常用配置和快捷键. 常用配置 显示行号 临时显示 永久显示 File——Settings——Edi ...
- 机器学习——交叉验证,GridSearchCV,岭回归
0.交叉验证 交叉验证的基本思想是把在某种意义下将原始数据(dataset)进行分组,一部分做为训练集(train set),另一部分做为验证集(validation set or test set) ...
- HandlerInterceptor拦截实现对PathVariable变量的读取
Http请求拦截作用 拦截后可以修改请求体 拦截后可以作一些其它统一的操作 问题提出 对于很多时间需要拦截很多Http请求,然后去获取一些参数,这些参数可能是querystring串,也可能是路由上的 ...