qTip2 精致的jQuery提示信息插件
qTip2 精致的jQuery提示信息插件 出处:http://www.cnblogs.com/lwme/archive/2012/02/16/qtip2-jquery-plugin.html
2012-02-16 22:31 by 囧月, 7764 阅读, 8 评论, 收藏, 编辑
qTip2是一个灰常强大且精致的jQuery提示信息插件,是qTip的第2版,也是一个全新的版本,提供了丰富的功能及漂亮的外观,非常易于使用。
qTip2采用了MIT/GPLv2许可,官方网站为:http://craigsworks.com/projects/qtip2/,目前还没发布一个稳定版,Nightly版本经常会更新,当然这并不影响正常使用。
简介
若不放心可以尝试旧版的qTip,但在一些参数上会有所不同;若是从qTip升级到qTip2,可以使用官方提供的转换工具来升级你的代码:http://craigsworks.com/projects/qtip2/converter/。
如果使用时出现问题,那么直接下载以下3个文件吧,至少官方演示很正常:
1
2
3
|
< link href = "http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css" rel = "stylesheet" /> |
从官方网站下载最新版本时,可以选择相应的样式及插件;可选的样式包括几种色彩风格(Colour Styles)、CSS3相关样式如圆角;以及以下各种插件,可根据自己需要选择:
- Ajax,这个不用说,请求远程内容的
- Tips,气泡对话效果,如箭头
- Modal,模态对话框效果,如jQuery UI Dialog / ThickBox 的效果
- Image map,提供对map内area标记的提示支持
- SVG,对SVG元素提供提示的支持
- BGIFrame,用于IE6这种古董,如遮住select控件等
除了以上插件的功能外,它的主要功能有(仅列出较常用的):
- 设置提示的内容、标题、关闭按钮等
- 使用元素的属性,来作为提示信息内容,如链接的标题(<a title="提示信息")、图片的提示(<img src="提示信息")等等
- 提示信息显示的位置
- 提示信息的目标,即显示到什么元素上
- 提示信息显示/隐藏触发的事件,如鼠标移到元素上、点击(mouseenter,click)
- 提示信息显示/隐藏的效果
- 外观的定义,通过相应样式设置
- 跟随可拖动目标、鼠标指针等
使用方法
以下就简单演示一些使用方法
创建一个最简单的提示
1
2
3
|
$( "#demo2" ).qtip({ content: "这是提示内容(by囧月)" }); |
创建一个带标题的提示:
1
2
3
4
5
6
|
$( "#demo3" ).qtip({ content: { text: "这是提示内容(by囧月 lwme.cnblogs.com)" , title: "提示标题" } }); |
带关闭按钮的提示:
1
2
3
4
5
6
7
8
9
|
$( "#demo3" ).qtip({ content: { text: "这是提示内容(by囧月 lwme.cnblogs.com)" , title: { text: "提示标题" , button: "关闭" } } }); |
使用元素的属性作为提示信息:
1
2
3
|
$( "a[title]" ).qtip(); //从链接的title $( "img[alt]" ).qtip(); //从img的alt $( "div[title]" ).qtip(); //从div的title |
也可以显式指定元素属性作为提示信息:
1
2
3
4
5
|
$( 'img[alt]' ).qtip({ content: { attr: 'alt' } }); |
使用AJAX请求远程:
1
2
3
4
5
6
7
8
|
$( "#demo4" ).qtip({ content: { text: "加载中..." , ajax: { url: "lwmeAtCnblogs.aspx?name=囧月" } } }); |
设置位置及样式:
1
2
3
4
5
6
7
8
9
|
$( "#demo5" ).qtip({ position: { my: 'bottom left' , at: 'top center' }, style: { classes: 'ui-tooltip-red' } }); |
点击时出现模态对话框:
1
2
3
4
5
6
7
8
9
|
$( 'button' ).qtip({ content: "这是提示内容(by囧月 lwme.cnblogs.com)" , show: { event: 'click' , // Show it on click... solo: true , // ...and hide all other tooltips... modal: true // ...and make it modal }, hide: false }); |
页面加载完成时显示,且不会自动隐藏:
1
2
3
4
5
6
7
|
$( 'button' ).qtip({ content: "这是提示内容(by囧月 lwme.cnblogs.com)" , show: { ready: true }, hide: false }); |
参数设置
先看一下qTip2默认的参数设置:
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
$.fn.qtip.defaults = { // 页面加载完成就创建提示信息的元素 prerender: false , // 为提示信息设置id,如设置为myTooltip // 就可以通过ui-tooltip-myTooltip访问这个提示信息 id: false , // 每次显示提示都删除上一次的提示 overwrite: true , // 通过元素属性创建提示 // 如a[title],把原有的title重命名为oldtitle suppress: true , // 内容相关的设置 content: { // 提示信息的内容 // 如果只设置内容可以直接 content: "提示信息" // 而不需要 content: { text: { "提示信息" } } text: true , // 提示信息使用的元素属性 attr: 'title' , // ajax插件 ajax: false , title: { // 提示信息的标题 // 如果只设置标题可以直接 title: "标题" text: false , // 提示信息的关闭按钮 // 如button:"x",button:"关闭" // 都可以启用关闭按钮 button: false } }, // 位置相关的设置 position: { // 提示信息的位置 // 如提示的目标元素的右下角(at属性) // 对应 提示信息的左上角(my属性) my: 'top left' , at: 'bottom right' , // 提示的目标元素,默认为选择器 target: FALSE, // 提示信息默认添加到的容器 container: FALSE, // 使提示信息在指定目标内可见,不会超出边界 viewport: FALSE, adjust: { // 提示信息位置偏移 x: 0, y: 0, mouse: TRUE, //是否跟随鼠标移动 resize: TRUE, method: 'flip flip' }, // 特效 effect: function (api, pos, viewport) { $( this ).animate(pos, { duration: 200, queue: FALSE }); } }, // 显示提示的相关设置 show: { // 触发事件的目标元素 // 默认为选择器 target: false , // 事件名称,默认为鼠标移到时 // 可以改为click点击 event: 'mouseenter' , // 特效 effect: true , // 延迟显示时间 delay: 90, // 隐藏其他提示 solo: false , // 在页面加载完就显示提示 ready: false , modal: { // 启用模态对话框效果 on: false , // 特效 effect: true , blur: true , escape: true } }, // 隐藏提示的相关设置 // 参考show hide: { target: false , event: 'mouseleave' , effect: true , delay: 0, // 设置为true时,不会隐藏 fixed: false , inactive: false ,//毫秒,当不发生任何操作时隐藏 leave: 'window' , distance: false //数字,距离鼠标移开的距离而隐藏 }, // 样式相关 style: { // 样式名称 classes: '' , widget: false , width: false , height: false , // tip插件,箭头相关设置 tip: { corner: true , mimic: false , width: 8, height: 8, border: true , offset: 0 } }, // 相关事件绑定 events: { render: null , move: null , show: null , hide: null , toggle: null , visible: null , focus: null , blur: null } }; |
看起来是很多,但是使用频率最高的估计也就以下这些参数:
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
|
$.fn.qtip.defaults = { content: { text: true , attr: 'title' , ajax: false , title: { text: false , button: false } }, position: { my: 'top left' , at: 'bottom right' , }, show: { event: 'mouseenter' , solo: false , ready: false , modal: false }, hide: { event: 'mouseleave' }, style: 'ui-tooltip-default' }; |
对于显示的位置,有以下参数可以设置:
1
2
3
4
5
6
7
8
9
10
11
12
|
my = [ 'top left' , 'top right' , 'top center' , 'bottom left' , 'bottom right' , 'bottom center' , 'right center' , 'right top' , 'right bottom' , 'left center' , 'left top' , 'left bottom' , 'center' ] at = [ 'bottom left' , 'bottom right' , 'bottom center' , 'top left' , 'top right' , 'top center' , 'left center' , 'left top' , 'left bottom' , 'right center' , 'right top' , 'right bottom' , 'center' ] |
而对于显示的色彩风格则有以下各种颜色:
1
|
[ 'red' , 'blue' , 'dark' , 'light' , 'green' , 'jtools' , 'plain' , 'youtube' , 'cluetip' , 'tipsy' , 'tipped' ] |
比如red就是ui-tooltip-red,默认为default。另外还有ui-tooltip-shadow、ui-tooltip-rounded分别表示阴影、圆角效果,可以叠加,如下:
1
2
3
4
5
6
|
$( "#demo2" ).qtip({ content: "这是提示内容(by囧月)" , style: { classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded' } }); |
另外对于ajax则有以下主要参数可以设置(与jQuery.ajax一致):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$( '.selector' ).qtip({ content: { text: 'Loading...' , // Loading text... ajax: { url: '/path/to/file' , // URL to the JSON script type: 'GET' , // POST or GET data: { id: 3 }, // Data to pass along with your request dataType: 'json' , // Tell it we're retrieving JSON success: function (data, status) { //... } } } }); |
需要注意的是,AJAX默认使用GET请求而且启用了cache。
qTip2 精致的jQuery提示信息插件的更多相关文章
- 29个非常流行的jQuery提示信息插件
在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用.如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件 ...
- 一款效果精致的 jQuery 多层滑出菜单插件
想要以用户友好的方式呈现多级菜单是件不容易的事情,而且还要跨浏览器兼容就更难了.Multi-Level Push Menu 这款 jQuery 插件提供了呈现这种菜单的解决方案,能够让你无限制的展示菜 ...
- 30个非常流行的提示信息插件(jQuery Tooltip Plugin)
在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用.如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件 ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- 让网站动起来!12款优秀的 jQuery 动画插件推荐
如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...
- noty – jQuery通知插件
noty是一个jQuery的通知(信息提示)插件,灵活轻便,是一个非常棒的用于替代传统提示对话框的插件. 当前最新版本为2.1.0: 从https://github.com/needim/noty 可 ...
- sDashboard:简单的,轻量级的 jQuery 仪表板插件
sDashboard 是一个轻量的仪表板 jQuery 插件,转换一个对象数组到仪表板.数组中的每个对象将被呈现为一个仪表板组件,可以通过左右拖 动重新排列. sDashboards 内置渲染 Da ...
- JQuery多媒体插件jQuery Media Plugin使用详解
malsup jquery media plugin 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, ...
- jquery.validate插件在booststarp中的运用
现在在网络上已经可以找到很多基于bootstarp的表单认证,但是验证的都不全面的,下载后,我们还要理解作者的思路然后进行修改添加,这种修改方式往往适合学习,时间很多的时候.但是我们很多时候是没有时间 ...
随机推荐
- CountDownLatch、CyclicBarrier、Semaphore、Exchanger
CountDownLatch: 允许N个线程等待其他线程完成执行.无法进行重复使用,只能用一次. 比如有2个任务A,它要等待其他4个任务执行完毕之后才能执行,此时就可以利用CountDownLatch ...
- mvc-1mvc和类(1)
简单的控制器结构 var Controller = {}; //创建一个users控制器 (Controller.users = function ($) { var nameClick = func ...
- 二分搜索 UVALive 6076 Yukari's Birthday (12长春K)
题目传送门 题意:问使得sum (k^i) = n || n -1 (1 <= i <= r) 的min (r*k)组合的r和k 分析:r的最大不会超过40,枚举r,二分搜索k.注意会爆 ...
- 发送JS错误日志到服务器
JS记录错误日志/捕捉错误 //onerror提供异常信息,文件路径和发生错误代码的行数的三个参数. window.onerror = function(e,url,index){ var msg = ...
- 【POJ】1113 Wall(凸包)
http://poj.org/problem?id=1113 答案是凸包周长+半径为l的圆的周长... 证明?这是个坑.. #include <cstdio> #include <c ...
- 【BZOJ】1901: Zju2112 Dynamic Rankings(区间第k小+树套树)
http://www.lydsy.com/JudgeOnline/problem.php?id=1901 这题调了我相当长的时间,1wa1a,我是第一次写树套树,这个是树状数组套splay,在每个区间 ...
- 李洪强-C语言4-内存分析
C语言内存分析 一.进制 概念:进制是一种计数方式,是数值的表现形式 4种主要的进制: ①. 十进制:0~9 ②. 二进制:0和1 ③. 八进制:0~7 ④. 十六进制:0~9+a b c d e f ...
- C++ Generate Rand Number Array by "srand()" 生成随机数
在C++中,我们有时想生成一个由随机数组成的数组,而且随机数的范围也可由我们来设定.那么我们就要用到srand()函数配合rand()来使用,参见如下代码: #include <vector&g ...
- hdu Cup
这题是道水题,用数学方法做比较简单.因为在做二分法的专题,所以这里采用二分的方式做,很简单,但是还是要用到数学的知识,比如三角形相似,圆台的 体积公式等. #include"iostream ...
- FastDFS 安装
FastDFS(centerOs) 安装包:FastDFS_v5.07.tar libfastcommon-master.zip(是从 FastDFS 和 FastDHT 中提取出来的公共 C 函数库 ...