消息提示插件toastr.js与Messenger组件
Toastr是一款基于jQuery的通知插件,可以灵活的自定义样式和拓展其功能!
toastr是一个基于Jquery简单、漂亮的消息提示插件,使用简单、方便,可以根据设置的超时时间自动消失。
cdn最新的:
http://www.bootcdn.cn/toastr.js/
toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成JS,非常的方便使用。
参考:
http://blog.csdn.net/cyh1111/article/details/53141037
1,集成使用:
//常规消息提示,默认背景为浅蓝色
toastr.info("你有新消息了!"); //成功消息提示,默认背景为浅绿色
toastr.success("你有新消息了!"); //警告消息提示,默认背景为橘黄色
toastr.warning("你有新消息了!"); //错误消息提示,默认背景为浅红色
toastr.error("你有新消息了!"); //带标题的消息框
toastr.success("你有新消息了!","消息提示"); //另一种调用方法
toastr["info"]("你有新消息了!","消息提示");
2,自定义用法:
toastr.options = {
closeButton: false,
debug: false,
progressBar: true,
positionClass: "toast-bottom-center",
onclick: null,
showDuration: "300",
hideDuration: "1000",
timeOut: "2000",
extendedTimeOut: "1000",
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: “300”,显示动作时间
hideDuration: “1000”,隐藏动作时间
timeOut: “2000”,自动关闭超时时间
extendedTimeOut: “1000”
showEasing: “swing”,
hideEasing: “linear”,
showMethod: “fadeIn” 显示的方式,和jquery相同
hideMethod: “fadeOut” 隐藏的方式,和jquery相同
消息提示插件toastr.js与Messenger组件的更多相关文章
- Jquery消息提示插件toastr使用详解
toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 html <script s ...
- Jquery消息提示插件toastr使用
toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 相关文件到官网去下载即可 1.引入toastr的js和css文件 <link hre ...
- Jquery消息提示插件toastr
toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 <script src=&q ...
- 基于jquery的消息提示框toastr.js
//消息提示全局配置 toastr.options = { "closeButton": false,//是否配置关闭按钮 "debug": false,//是 ...
- 【源码解读】js原生消息提示插件
效果如下: 关闭message后前后message的衔接非常丝滑,这部分是我比较感兴趣的.带着这个问题先了解下DOM结构,顺便整理下作者的思路. 从DOM里我们可以看到所有的message都在一个容器 ...
- 漂亮灵活设置的jquery通知提示插件toastr
toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成 ...
- PNotify – 简单易用的 JS 通知,消息提示插件
PNotify 是一个 JavaScript 通知插件,前身为 Pines Notify.它旨在提供无与伦比的灵活性,同时很容易使用.它可以提供无阻塞的通知,允许用户无需关闭通知或者提示信息就可以点击 ...
- 仿网易邮箱5.0(四):信息提示插件(tips.js)
信息提示插件,在平常的开发中也是经常乃至的一个插件,像是一些辅助信息的提示,如:加载成功.提交信息成功或失败等等.这个插件在163邮箱中用在切换标签时提示加载状态. 下面我们先来分析一下这个小插件需要 ...
- 基于jquery的tips悬浮消息提示插件tipso
<a href="javascript:;" class="disabled" data-tipso="Tips" id=" ...
随机推荐
- 由于Windows和Linux行尾标识引起脚本无法运行的解决
在所有的操作系统中,文本文件的结束或者换行都是有行尾符来标识的,C语言中经常使用\n作为换行,\r作为跳格TAB:实际上在计算机还没有真正出现之前,有种电传打字机的设备,每秒钟可以打印10个字符,但是 ...
- linux expect
1.首先确定是否安装expect /home/root> which expect /usr/bin/expect 如果没有安装,先安装一下 安装方法: 请参考 http://www.cnblo ...
- jq获取绝对定位与相对定位的top, left值
jquery 实现方法绝对var X = $('#ID').offset().top; var Y = $('#ID').offset().left; 相对var X = $('#ID').posit ...
- 【编程题目】输出 1 到最大的 N 位数
65.输出 1 到最大的 N 位数(运算)题目:输入数字 n,按顺序输出从 1 最大的 n 位 10 进制数.比如输入 3,则输出 1.2.3 一直到最大的 3 位数即 999. 思路:肯定要考虑数字 ...
- 【编程题目】求1+2+…+n, 要求不能使用乘除法、for、while、if、else、switch、case和条件语句
看到这个问题,第一个反应是真变态啊. 然后,直觉是不能用循环就只能用递归了.可递归怎么跳出来却遇到了麻烦, 我连goto语句都考虑了也没弄好. 后来想到一个非常NC的方法:查找表. 如果n限定一个比较 ...
- win7下安装openpyxl
想使用python来操作Excel,看资料据说openpyxl非常好用,于是到https://pypi.python.org/pypi/openpyxl下载了安装包.下面就来说说安装步骤,也算是对自己 ...
- IOS - 真机测试
转:版权声明:本文由本人亲自一步步完成,并细心排版生成,望广大同仁尊重一下本人的劳动成果,转载请注明出处,原文地址http://my.oschina.net/joanfen/blog/167730 一 ...
- Jquery获取select 控件的change事件时选中的值
HTML代码如下: <div class="col-sm-9 col-xs-12"> <select id="groupid" class=& ...
- 整合Struts2、Hibernate、Spring
将项目中的对象和对象之间的管理,纳入spring容器,由spring管理 1 实现spring+hibernate集成 1.1 新建web项目 建立项目的包结构(package) 1.2加入jar包 ...
- IFC
IFC是设计师使用的软件,然后存储的格式. 这个适用于精细的设计.