漂亮灵活设置的jquery通知提示插件toastr
toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成JS,非常的方便使用。jQ酷的另外一款jquery提示插件也不错:jQuery自定义工具提示插件DarkTooltip。
使用方法:
引入核心文件
1
2
3
|
< link href = "toastr.css" rel = "stylesheet" type = "text/css" /> < script src = "http://libs.baidu.com/jquery/1.9.1/jquery.min.js" ></ script > < script src = "toastr.js" ></ script > |
写入html代码,这里只需写入触发事件的按丑。
1
2
3
4
5
|
< input type = "button" name = "success" id = "success" value = "成功" /> < input type = "button" name = "info" id = "info" value = "提示" /> < input type = "button" name = "warning" id = "warning" value = "警告" /> < input type = "button" name = "error" id = "error" value = "错误" /> < input type = "button" name = "clear" id = "clear" value = "清除" /> |
给按钮绑定事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
$( function (){ //参数设置,若用默认值可以省略以下面代 toastr.options = { "closeButton" : false , //是否显示关闭按钮 "debug" : false , //是否使用debug模式 "positionClass" : "toast-top-full-width" , //弹出窗的位置 "showDuration" : "300" , //显示的动画时间 "hideDuration" : "1000" , //消失的动画时间 "timeOut" : "5000" , //展现时间 "extendedTimeOut" : "1000" , //加长展示时间 "showEasing" : "swing" , //显示时的动画缓冲方式 "hideEasing" : "linear" , //消失时的动画缓冲方式 "showMethod" : "fadeIn" , //显示时的动画方式 "hideMethod" : "fadeOut" //消失时的动画方式 }; //成功提示绑定 $( "#success" ).click( function (){ toastr.success( "祝贺你成功了" ); }) //信息提示绑定 $( "#info" ).click( function (){ toastr.info( "这是一个提示信息" ); }) //敬告提示绑定 $( "#warning" ).click( function (){ toastr.warning( "警告你别来烦我了" ); }) //错语提示绑定 $( "#error" ).click( function (){ toastr.error( "出现错误,请更改" ); }) //清除窗口绑定 $( "#clear" ).click( function (){ toastr.clear(); }) }) |
转载请注明:jQ酷 » 漂亮灵活设置的jquery通知提示插件toastr
漂亮灵活设置的jquery通知提示插件toastr的更多相关文章
- 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 ...
- 消息提示插件toastr.js与Messenger组件
Toastr是一款基于jQuery的通知插件,可以灵活的自定义样式和拓展其功能! toastr是一个基于Jquery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. cdn最 ...
- toastr 通知提示插件
table.sb-tb td,table.sb-tb th { padding: 5px 10px !important } jquery toastr 一款轻量级的通知提示框插件. 网页开发中经常会 ...
- PoshyTip jQuery 文本提示插件的使用
PoshyTip 是JQuery中一款文本提示插件,在Jsp页面使用相当方便,插件内包含了很多外观样式,可以作为FormTooltips使用. 插件包下载地址:http://vadikom.com/f ...
- 介绍Web项目中用到的几款JQuery消息提示插件
第一款 noty 官方网站:https://github.com/needim/noty 第二款 artDialog artDialog是一个精巧的web对话框组件,压缩后只有十多KB,并且不依赖其他 ...
- Jquery 错误提示插件
这是一个简单的输入框错误提示插件,可拓展! .jq-error{ font-size:12px; min-width:150px; width:auto; max-width:350px; line- ...
- TaggingJS – 可以灵活定制的 jQuery 标签系统插件
TaggingJS 是一款 jQuery 插件,用来创建高度可定制的前端标签系统.这款插件不到3KB ,支持主流浏览器.有几种方法来定制 TaggingJS 的默认行为:一是使用 custom_op ...
随机推荐
- spoj 138
离散化 去掉重复点 排序 二分查找 #include<cstdio> #include<cstring> #include<algorithm> #define ...
- What is the difference between database table and database view?
The database table has a physical existence in the database. A view is a virtual table, that is one ...
- 关联式容器(associative containers)
关联式容器(associative containers) 根据数据在容器中的排列特性,容器可分为序列式(sequence)和关联式(associative)两种. 标准的STL关联式容器分为set( ...
- POJ3414Pots
http://poj.org/problem?id=3414 题意 : 大意是说给你两个杯子的体积和一个目标体积,a,b,c,通过对a,b进行6种操作,调出c体积的水,6种操作分别是把a倒满,把b倒满 ...
- hdu 1063 Exponentiation
求实数的幂,这个用C++写的话有点长,但是用Java写就非常方便了…… ); System.out.println(an); } }}
- jQuery动画效果实现
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- ubuntu -LDAP的配置
本文内容来自 http://blog.csdn.net/jl19861101/article/details/5582841 1. LDAP Server1.1. 安装主要安装一下套件: 代码: # ...
- JS事件(事件冒泡和事件捕获)
事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...
- 乳草的入侵//BFS
P1030 乳草的入侵 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 USACO OCT09 6TH 描述 Farmer John一直努力让他的草地充满鲜美 ...
- lintcode 中等题:搜索旋转排序数组II
题目 搜索旋转排序数组 II 跟进“搜索旋转排序数组”,假如有重复元素又将如何? 是否会影响运行时间复杂度? 如何影响? 为何会影响? 写出一个函数判断给定的目标值是否出现在数组中. 样例 给出[3, ...