脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → qtip使用方法

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

 更新时间：2010年09月08日 09:14:58   作者：  
qTip是一个基于JQuery的Tooltip插件。它几乎支持所有的主流浏览器。
例如：
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>

效果如图所示：

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>

效果如图所示：

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>

效果如图所示：

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>

效果如图所示：

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>

效果如图所示：

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>

效果如图所示：

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中的类名选择器（.class）用法简单示例

    jQuery中的类名选择器（.class）用法简单示例

    这篇文章主要介绍了jQuery中的类名选择器（.class）用法,简单介绍了jQuery类名选择器的概念、原理并结合实例形式分析了类选择器的简单使用方法,需要的朋友可以参考下
    2018-05-05
  • jQuery插件PageSlide实现左右侧栏导航菜单

    jQuery插件PageSlide实现左右侧栏导航菜单

    jQuery pageSlide 是一个可以让网页出现滚动效果的jQuery插件，它可以控制一个隐藏页面的显示和关闭。具体来说，就是当前页占一个完整页面，隐藏页是看不到的，你设置一个控制的地方，点击该控制时触发事件，隐藏的页面就滑出来，再次点击隐藏页面以外的地方，它就又关闭
    2015-04-04
  • jquery(javascript)自动序列编号和属性编号实现代码

    jquery(javascript)自动序列编号和属性编号实现代码

    jquery(javascript)自动序列编号和属性编号实现代码，需要的朋友可以参考下
    2012-07-07
  • jQuery多选框选择数量限制方法

    jQuery多选框选择数量限制方法

    这篇文章主要为大家详细介绍了jQuery多选框选择数量限制方法，最多选择 三项 的上限已满, 其他选项将会变为不可选
    2017-02-02
  • jquery传参及获取方式(两种方式)

    jquery传参及获取方式(两种方式)

    这篇文章主要介绍了jquery传参及获取方式,本文给大家两种方式，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-02-02
  • jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】

    jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】

    这篇文章主要介绍了jQuery实现带遮罩层效果的blockUI弹出层,可实现带有弹出遮罩层效果的弹出对话框功能,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2016-09-09
  • javascript原生和jquery库实现iframe自适应高度和宽度

    javascript原生和jquery库实现iframe自适应高度和宽度

    这篇文章主要介绍了javascript原生和jquery库实现iframe自适应内容高度和宽度,需要的朋友可以参考下
    2014-07-07
  • jQuery实现动态生成年月日级联下拉列表示例

    jQuery实现动态生成年月日级联下拉列表示例

    这篇文章主要介绍了jQuery实现动态生成年月日级联下拉列表,结合具体实例形式分析了jQuery日期时间运算构造级联下拉列表相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • jquery的ajax异步请求接收返回json数据实例

    jquery的ajax异步请求接收返回json数据实例

    jquery的ajax异步请求接收返回json数据方法设置简单，一个是服务器处理程序是返回json数据，另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以。这篇文章对此进行了实例介绍,需要的朋友可以参考下
    2014-06-06
  • jQuery的12招常用技巧分享

    jQuery的12招常用技巧分享

    jquery是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器。由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
    2011-08-08

最新评论