qTip2 精致的基于jQuery提示信息插件


Posted in Javascript onFebruary 17, 2012

qTip2采用了MIT/GPLv2许可,官方网站为:http://craigsworks.com/projects/qtip2/,目前还没发布一个稳定版,Nightly版本经常会更新,当然这并不影响正常使用。
简介
若不放心可以尝试旧版的qTip,但在一些参数上会有所不同;若是从qTip升级到qTip2,可以使用官方提供的转换工具来升级你的代码:http://craigsworks.com/projects/qtip2/converter/。

如果使用时出现问题,那么直接下载以下3个文件吧,至少官方演示很正常:

<link href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css" rel="stylesheet" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script>

从官方网站下载最新版本时,可以选择相应的样式及插件;可选的样式包括几种色彩风格(Colour Styles)、CSS3相关样式如圆角;以及以下各种插件,可根据自己需要选择:
  1. Ajax,这个不用说,请求远程内容的
  2. Tips,气泡对话效果,如箭头
  3. Modal,模态对话框效果,如jQuery UI Dialog / ThickBox 的效果
  4. Image map,提供对map内area标记的提示支持
  5. SVG,对SVG元素提供提示的支持
  6. BGIFrame,用于IE6这种古董,如遮住select控件等

除了以上插件的功能外,它的主要功能有(仅列出较常用的):

  1. 设置提示的内容、标题、关闭按钮等
  2. 使用元素的属性,来作为提示信息内容,如链接的标题(<a title="提示信息")、图片的提示(<img src="提示信息")等等
  3. 提示信息显示的位置
  4. 提示信息的目标,即显示到什么元素上
  5. 提示信息显示/隐藏触发的事件,如鼠标移到元素上、点击(mouseenter,click)
  6. 提示信息显示/隐藏的效果
  7. 外观的定义,通过相应样式设置
  8. 跟随可拖动目标、鼠标指针等

使用方法
以下就简单演示一些使用方法

创建一个最简单的提示:

$("#demo2").qtip({ 
content: "这是提示内容(by?逶拢? 
});

创建一个带标题的提示:
$("#demo3").qtip({ 
content: { 
text: "这是提示内容(by?逶 lwme.cnblogs.com)" 
, title: "提示标题" 
} 
});

带关闭按钮的提示:
$("#demo3").qtip({ 
content: { 
text: "这是提示内容(by?逶 lwme.cnblogs.com)" 
, title: { 
text: "提示标题" 
, button: "关闭" 
} 
} 
});

使用元素的属性作为提示信息:
$("a[title]").qtip(); //从链接的title 
$("img[alt]").qtip(); //从img的alt 
$("div[title]").qtip(); //从div的title

也可以显式指定元素属性作为提示信息:
$('img[alt]').qtip({ 
content: { 
attr: 'alt' 
} 
});

使用AJAX请求远程:
$("#demo4").qtip({ 
content: { 
text: "加载中...", 
ajax: { 
url: "lwmeAtCnblogs.aspx?name=?逶? 
} 
} 
});

设置位置及样式:
$("#demo5").qtip({ 
position: { 
my: 'bottom left', 
at: 'top center' 
}, 
style: { 
classes: 'ui-tooltip-red' 
} 
});

点击时出现模态对话框:
$('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 
});

页面加载完成时显示,且不会自动隐藏:
$('button').qtip({ 
content: "这是提示内容(by?逶 lwme.cnblogs.com)", 
show: { 
ready: true 
}, 
hide: false 
});

参数设置
先看一下qTip2默认的参数设置:
$.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 
} 
};

看起来是很多,但是使用频率最高的估计也就以下这些参数:
$.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' 
};

对于显示的位置,有以下参数可以设置:
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' 
]

而对于显示的色彩风格则有以下各种颜色:
['red', 'blue', 'dark', 'light', 'green','jtools', 'plain', 'youtube', 'cluetip', 'tipsy', 'tipped']

比如red就是ui-tooltip-red,默认为default。另外还有ui-tooltip-shadow、ui-tooltip-rounded分别表示阴影、圆角效果,可以叠加,如下:
$("#demo2").qtip({ 
content: "这是提示内容(by?逶拢? 
, style: { 
classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded' 
} 
});

另外对于ajax则有以下主要参数可以设置(与jQuery.ajax一致):
$('.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就介绍到这里,更多信息请参阅以下链接:
官方网站:http://craigsworks.com/projects/qtip2/
在线演示:http://craigsworks.com/projects/qtip2/demos/
官方文档:http://craigsworks.com/projects/qtip2/docs/
最后,放一个简单的DEMO。
作者:?逶
Javascript 相关文章推荐
jquery控制listbox中项的移动并排序
Nov 12 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
分类解析jQuery选择器
Nov 23 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 #Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 #Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 #Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 #Javascript
javascript简易缓动插件(源码打包)
Feb 16 #Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 #Javascript
js URL参数的拼接方法比较
Feb 15 #Javascript
You might like
拼音码表的生成
2006/10/09 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
Smarty保留变量用法分析
2016/05/23 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
python实现定时播放mp3
2015/03/29 Python
基于Python的接口测试框架实例
2016/11/04 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
基于python监控程序是否关闭
2020/01/14 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
浅析matlab中imadjust函数
2020/02/27 Python
python读取mysql数据绘制条形图
2020/03/25 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
Why we need EJB
2016/10/20 面试题
化工工艺专业求职信
2013/09/22 职场文书
公司慰问信范文
2015/03/23 职场文书
爱的教育读书笔记
2015/06/26 职场文书
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers