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加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
js 金额文本框实现代码
Feb 14 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
php 正则 过滤html 的超链接
2009/06/02 PHP
php开发工具有哪五款
2015/11/09 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
JavaScript 继承的实现
2009/07/09 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
JavaScript中的几种继承方法示例
2020/12/06 Javascript
Python编程之属性和方法实例详解
2015/05/19 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
python GUI模拟实现计算器
2020/06/22 Python
Python如何给你的程序做性能测试
2020/07/29 Python
简单的命令查看安装的python版本号
2020/08/28 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
小学生开学感言
2014/02/28 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
事业单位鉴定材料
2014/05/25 职场文书
工程造价专业求职信
2014/07/17 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS