【JS】jquery通知插件toastr
toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成JS,非常的方便使用。
使用demo地址:http://www.jq22.com/yanshi476(可获取toastr不同的配置方式)
1、兼容性
2、toastr使用
- 引入核心文件
<span style="font-family:Comic Sans MS;">
<link href="toastr.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/toastr.min.css" />
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/toastr.js" ></script></span>
- 编写html代码
//常规消息提示,默认背景为浅蓝色
toastr.info("你有新消息了!");
//显示一个没有标题的信息框(蓝色)
toastr.info("I am yanying");
//显示一个没有标题的警告框(橘黄色)
toastr.warning("I am yanying");
//显示一个没有标题的成功提示(绿色)
toastr.info("I am yanying");
//显示一个没有标题的错误提示(深红色)
toastr.error("I am yanying");
//清除一个错误
toastr.clear();
- 自定义选项
$(function () { $('#showtoast').click(function () {
toastr.options = { closeButton: true,//是否显示关闭按钮
debug: false,//是否使用debug模式
progressBar: true,//是否显示进度条,当为false时候不显示;当为true时候,显示进度条,当进度条缩短到0时候,消息通知弹窗消失
positionClass: "toast-top-right",//弹出窗的位置
onclick: null,
showDuration: "300",//显示的动画时间
hideDuration: "30000",//消失的动画时间
timeOut: "5000",//展现时间
extendedTimeOut: "1000",//加长展示时间
showEasing: "swing",//显示时的动画缓冲方式
hideEasing: "linear",//消失时的动画缓冲方式
showMethod: "fadeIn",//显示时的动画方式
hideMethod: "fadeOut"//消失时的动画方式
}; var $toast = toastr['info']('您有新消息了!'); }); })
设置选项
<1>positionClass: 'toast-top-right'
位置信息,消息弹窗显示的位置,可以显示的位置对应的值
- toast-top-right
- toast-botton-right
- toash-bottom-left
- toast-top-left
- toast-top-full-width 这个是在网页顶端,宽度铺满整个屏幕
- toast-bottom-full-width
- toast-top-center顶端中间
- toast-bottom-center
<2>toastr['error']('I am yanying', 'title');
其中的error为显示的通知的样式类型,有4种选择
- success 成功,绿色
- info 信息,蓝色
- warning,警告,橙色
- error,错误,深红色
效果展示
自定义选项,有进度条和关闭按钮效果。
【JS】jquery通知插件toastr的更多相关文章
- js插件---->jquery通知插件toastr的使用
toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置.toastr需要jquery的 ...
- noty – jQuery通知插件
noty是一个jQuery的通知(信息提示)插件,灵活轻便,是一个非常棒的用于替代传统提示对话框的插件. 当前最新版本为2.1.0: 从https://github.com/needim/noty 可 ...
- jQuery通知插件 -- noty
noty是一个jQuery的通知(信息提示)插件,灵活轻便,是一个非常棒的用于替代传统提示对话框的插件. 当前最新版本为2.1.0: 从https://github.com/needim/noty 可 ...
- jQuery通知插件noty
jQuery 通知查件noty 简单使用 官方:http://ned.im/noty/ 其它查件推荐 NotifIt Demo http://js.itivy.com/jiaoben1852/inde ...
- vue插件开发的两种方法:以通知插件toastr为例
方法一: 1.写插件: 在 src 文件夹下面建 lib 文件夹用于存放插件,lib 文件夹下再建toastr文件夹,在toastr文件夹下新建 toastr.js 和 toastr.vue两个文件. ...
- 漂亮灵活设置的jquery通知提示插件toastr
toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成 ...
- 消息提示插件toastr.js与Messenger组件
Toastr是一款基于jQuery的通知插件,可以灵活的自定义样式和拓展其功能! toastr是一个基于Jquery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. cdn最 ...
- Notyf - 超级简单、响应式的 JS 通知插件
通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示 免费下载 ...
- js消息提示框插件-----toastr用法
(本文系转载) 因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的.所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给 ...
随机推荐
- Oracle 12C 新特性之 恢复表
RMAN的表级和表分区级恢复应用场景:1.You need to recover a very small number of tables to a particular point in time ...
- 编程语言与C语言的简介
1.什么是程序 指挥计算机执行我们想要它做的动作,而依照顺序执行的一组指令 2.程序的作用是什么 指挥计算机工作 3.程序的特征 1.程序是一行一行的执行 2.是一种与计算机沟通的语言 3.程序是由特 ...
- 关于Java解压文件的一些坑及经验分享(MALFORMED异常)
文章也已经同步到我的csdn博客: http://blog.csdn.net/u012881584/article/details/72615481 关于Java解压文件的一些坑及经验分享 就在本周, ...
- JSON的使用小结
JSON中存储的是key:value,其实在编程的时候我们会遇到很多都是key:value的形式.比如:map,java对象(一个对象的一个属性只会有一个值),数据库中key:value对应着里面存储 ...
- javaWeb学习总结(5)- HttpServletRequest应用
HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过这个对象的相关方法,即可以获得客户的这些信息 ...
- 在wamp下使用netbeans开启Xdbug
1.到http://www.xdebug.org 下载与PHP对应的xdebug版本,也可以把phpinfo源码粘贴到http://www.xdebug.org/find-binary.php,提交后 ...
- 开关调色新世界BP2888电源解决方案
LED智能方案经过几年的拼杀,已经风靡照明界.但人们渐渐发现,对照明来说,一味追求花哨的功能并不被市场所认同,而其中开关调色,以其简单易操作的特点,已逐步融入广大消费者的生活习惯中.对吸顶灯,面板灯等 ...
- OAuth 2.0 / RCF6749 协议解读
OAuth是第三方应用授权的开放标准,目前版本是2.0版,以下将要介绍的内容和概念主要来源于该版本.恐篇幅太长,OAuth 的诞生背景就不在这里赘述了,可参考 RFC 6749 . 四种角色定义: R ...
- 深度解析PHP数组函数array_slice
看到array_slice()这个函数让我想起了VFP中的range这个范围取值的子句 这个函数一共有四个参数: 被取值的数组(必需) 取值的起始位置(必需) 取值的终止位置,如果不填写默认到数组最后 ...
- centos nginx-1.10.3 安装
wget http://nginx.org/download/nginx-1.13.1.tar.gz nginx 依赖 pcre 库,要先安装pcre,因为nginx 要在rewrite 要解析正则表 ...