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 闭包究竟是什么
Apr 12 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
sails框架的学习指南
Dec 22 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
JS正则表达式常见用法实例详解
Jun 19 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 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 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
由document.body和document.documentElement想到的
2009/04/13 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
高中生自我评价个人范文
2013/11/09 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
高效课堂标语
2014/06/26 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
春季运动会开幕词
2015/01/28 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
python pygame 开发五子棋双人对弈
2022/05/02 Python