jquery的Tooltip插件 qtip使用详细说明


Posted in Javascript onSeptember 08, 2010

例如:
Internet Explorer 6.0+
Firefox 2.0+
Opera 9.0+
Safari 3.0+
Google Chrome 1.0+
Konqueror 3.5+
使用qTip可以很轻松的定义tip的位置以及样式,同时qTip还有一个强大的API......
使用qTip前,只需引入两个JS文件即可:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>

下面举几个比较简单的例子。

1、Basic text

html如下所示:

<div id="content"> 
<a href=" ">Basic text</a> 
</div>

JS代码:
<script type="text/javascript"> 
$(document).ready(function() 
{ 
$('#content a[href]').qtip( 
{ 
content: 'Some basic content for the tooltip' 
}); 
}); 
</script>

效果如图所示:
jquery的Tooltip插件 qtip使用详细说明
2、Title attribute

html如下所示:

<div id="content"> 
<a href=" " title="That sounds familiar...">Title attribute</a> 
</div>

JS代码:
<script type="text/javascript"> 
$(document).ready(function() 
{ 
$('#content a[href][title]').qtip({ 
content: { 
text: false 
}, 
style: 'cream' 
}); 
}); 
</script>

效果如图所示:
jquery的Tooltip插件 qtip使用详细说明
3、Image

html如下所示:
<div id="content"> 
<a href=" ">Image</a> 
</div>

JS代码:
<script type="text/javascript"> 
$(document).ready(function() 
{ 
$('#content a[href]').qtip({ 
content: '<img src="small.png" alt="Image" />' 
}); 
}); 
</script>

效果如图所示:
jquery的Tooltip插件 qtip使用详细说明
4、Corner values

html如下所示:

<div id="content" style="margin-top:200px;margin-left:200px;"> 
<a href=" ">Corner values</a> 
</div>

JS代码:
<script type="text/javascript"> 
var corners = 'bottomLeft'; 
var opposites = 'topRight'; 
$(document).ready(function() 
{ 
$('#content a') 
.hover(function() 
{ 
$(this).html(opposites) 
.qtip({ 
content: corners, 
position: { 
corner: { 
tooltip: corners, 
target: opposites 
} 
}, 
show: { 
when: false, 
ready: true 
}, 
hide: false, 
style: { 
border: { 
width: 5, 
radius: 10 
}, 
padding: 10, 
textAlign: 'center', 
tip: true, 
name: 'cream' 
} 
}); 
}); 
}); 
</script>

效果如图所示:
jquery的Tooltip插件 qtip使用详细说明
5、Fixed tooltips

html如下所示:
<div id="content"> 
<img src="sample.jpg" alt="" height="200" /> 
</div>

JS代码:
<script type="text/javascript"> 
$(document).ready(function() 
{ 
$('#content img').each(function() 
{ 
$(this).qtip( 
{ 
content: '<a href=" ">Edit</a> | <a href=" ">Delete</a>', 
position: 'topRight', 
hide: { 
fixed: true 
}, 
style: { 
padding: '5px 15px', 
name: 'cream' 
} 
}); 
}); 
}); 
</script>

css代码:
<style type="text/css"> 
#content img{ 
float: left; 
margin-right: 35px; 
border: 2px solid #454545; 
padding: 1px; 
} 
</style>

效果如图所示:
jquery的Tooltip插件 qtip使用详细说明
6、Loading html

html如下所示:
<div id="content"> 
<a href="#" rel="sample.html">Click me</a> 
</div>

JS代码:
Js代码 
<script type="text/javascript"> 
$(document).ready(function() 
{ 
$('#content a[rel]').each(function() 
{ 
$(this).qtip( 
{ 
content: { 
url: $(this).attr('rel'), 
title: { 
text: 'Wiki - ' + $(this).text(), 
button: 'Close' 
} 
}, 
position: { 
corner: { 
target: 'bottomMiddle', 
tooltip: 'topMiddle' 
}, 
adjust: { 
screen: true 
} 
}, 
show: { 
when: 'click', 
solo: true 
}, 
hide: 'unfocus', 
style: { 
tip: true, 
border: { 
width: 0, 
radius: 4 
}, 
name: 'light', 
width: 570 
} 
}) 
}); 
}); 
</script>

效果如图所示:
jquery的Tooltip插件 qtip使用详细说明
7、Modal tooltips
html如下所示:
<div id="content"> 
<a href="#" rel="modal">Click here</a> 
</div>

JS代码:
<script type="text/javascript"> 
$(document).ready(function() 
{ 
$('a[rel="modal"]:first').qtip( 
{ 
content: { 
title: { 
text: 'Modal tooltips sample', 
button: 'Close' 
}, 
text: 'hello world' 
}, 
position: { 
target: $(document.body), 
corner: 'center' 
}, 
show: { 
when: 'click', 
solo: true 
}, 
hide: false, 
style: { 
width: { max: 350 }, 
padding: '14px', 
border: { 
width: 9, 
radius: 9, 
color: '#666666' 
}, 
name: 'light' 
}, 
api: { 
beforeShow: function() 
{ 
$('#qtip-blanket').fadeIn(this.options.show.effect.length); 
}, 
beforeHide: function() 
{ 
$('#qtip-blanket').fadeOut(this.options.hide.effect.length); 
} 
} 
}); 
$('<div id="qtip-blanket">') 
.css({ 
position: 'absolute', 
top: $(document).scrollTop(), 
left: 0, 
height: $(document).height(), 
width: '100%', 
opacity: 0.7, 
backgroundColor: 'black', 
zIndex: 5000 
}) 
.appendTo(document.body) 
.hide(); 
}); 
</script>

效果如图所示:
jquery的Tooltip插件 qtip使用详细说明
Javascript 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
动态加载jquery库的方法
Feb 12 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
jquery validate demo 基础
Oct 29 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
jquery的Theme和Theme Switcher使用小结
Sep 08 #Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 #Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 #Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 #Javascript
Document对象内容集合(比较全)
Sep 06 #Javascript
Jquery优化效率 提升性能解决方案
Sep 06 #Javascript
jquery中this的使用说明
Sep 06 #Javascript
You might like
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
递归列出所有文件和目录
2006/10/09 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
分享3个php获取日历的函数
2015/09/25 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
Javascript函数的参数
2015/07/16 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
这样回答继承可能面试官更满意
2019/12/10 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
pandas apply多线程实现代码
2020/08/17 Python
python实现自动打卡的示例代码
2020/10/10 Python
python 图像增强算法实现详解
2021/01/24 Python
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
linux面试题参考答案(6)
2016/06/23 面试题
4s店活动策划方案
2014/08/25 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers