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 相关文章推荐
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
js中function()使用方法
Dec 24 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
js实现随机点名功能
Dec 23 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
php获取某个目录大小的代码
2008/09/10 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
PHP如何使用Memcached
2016/04/05 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
VUE实现移动端列表筛选功能
2019/08/23 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
Python hmac模块使用实例解析
2019/12/24 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
办公室年终个人自我评价
2013/10/28 职场文书
秘书英文求职信范文
2014/01/31 职场文书
高三政治教学反思
2014/02/06 职场文书
《猫》教学反思
2014/02/26 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
物业接待员岗位职责
2015/04/15 职场文书
总结会主持词
2015/07/02 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL