Jquery 插件 qtip 实现丰富的提示效果

在html中，我们如过实现 鼠标移到元素上给出提示的话，我们可以为每个元素增加title 属性。但是这样的提示不够美观，qtip的出现给我们增强效果提供了新的选择，官网地址如下

http://craigsworks.com/projects/qtip/ 里面有好多的demo。代码页介绍的好详细。

主要有以下功能供我们选择

以及以下各种插件，可根据自己需要选择：

Ajax，这个不用说，请求远程内容的
Tips，气泡对话效果，如箭头
Modal，模态对话框效果，如jQuery UI Dialog /ThickBox 的效果
Image map，提供对map内area标记的提示支持

除了以上插件的功能外，它的主要功能有（仅列出较常用的）：

设置提示的内容、标题、关闭按钮等
使用元素的属性，来作为提示信息内容，如链接的标题(<a title="提示信息")、图片的提示(<img src="提示信息")等等
提示信息显示的位置
提示信息的目标，即显示到什么元素上
提示信息显示/隐藏触发的事件，如鼠标移到元素上、点击(mouseenter,click)

提示信息显示/隐藏的效果
外观的定义，通过相应样式设置
跟随可拖动目标、鼠标指针等

下面

使用也很简单

导入 jquery 文件 和插件的文件库，

script src="lib/jquery-1.8.0.min.js"></script>
<script src="lib/jquery.qtip-1.0.0-rc3.js"></script>

<span id='imgtootip'>无所谓</span>

在这里我实现一个图片的提示效果

$('#imgtootip').qtip({content:{text:'<img style="width:40px;height:40px" src="Apple.jpg"/>',title:{text:'我的标题'}},hide:'unfocus',position: {
corner: {
tooltip: 'topMiddle',
target: 'bottomMiddle'
}
},style:{tip:true,name:'cream'}

content 即为显示内容，当然我们可以 设置显示的内容以及标题，hide设置为 unfocus 即为 失去焦点是 提示框自动隐藏

style 来设置属性。比如有无箭头，颜色（'dark','cream','green','red','light','blue'）主题样式等等，在设置corner中
tootip 为提示框中的箭头相对提示框的位置。

target是 代表提示框相对提示内容的位置。取值 如下选择

[
'bottomLeft', 'bottomRight', 'bottomMiddle',
'topRight', 'topLeft', 'topMiddle',
'leftMiddle', 'leftTop', 'leftBottom',
'rightMiddle', 'rightBottom', 'rightTop'
];

还可以 把元素的属性设为显示内容

在html中添加如下代码

<a tootip='我的属性2' href="http://www.baidu.com">Basic text</a>

<a tootip='我的属性3' href="http://www.baidu.com">Basic text</a>

<a tootip='我的属性4' href="http://www.baidu.com">Basic text</a>

需要注意的是 content的是动态获取的。 获取所有的a 然后 遍历为每一个 元素创建tootip

$('a').qtip({content:$('a').attr('tootip'),style: 'cream'});

$('#content a').each(function(index) {

$(this).qtip(

{content:$(this).attr('tootip'),style:'dark'}

)

});

创建模式对话框，模式对话框主要有一个 对话框以及一个遮罩层来组成的

$('a[rel="modal"]:first').qtip(
{
content: {
title: {
text: '模式对话框',
button: '关闭'
},
text: '这是一个模式对话框，测试专用'
},
position: {
target: $(document.body), // 设置位置相对于真个文档
corner: 'center' // 位置设置为文档中间
},
show: {
when: 'click', // 在点击事件触发后呈现该对话框，如果要执行其他的事件，可以写这里面
solo: true // 隐藏其他的tooltip 只显示这一个
},
hide: false,//如果不设置 点击对话框外的部分此对话框将会消失,关闭之前如果要执行其他的事件，也可以写这里面
style: {
width: { max: 350 },
padding: '14px',
border: {
width: 9,
radius: 9,
color: '#666666'
},

name: 'red'
},
api: {
beforeShow: function()
{
// 显示遮罩层
$('#qtip-blanket').fadeIn(this.options.show.effect.length);
},
beforeHide: function()
{
// 隐藏遮罩层
$('#qtip-blanket').fadeOut(this.options.hide.effect.length);
}
}
});

// 设置一个div作为遮罩层，当显示对话框时填满浏览器窗口
$('<div id="qtip-blanket">')
.css({
position: 'absolute',
top: $(document).scrollTop(), // Use document scrollTop so it's on-screen even if the window is scrolled
left: 0,
height: $(document).height(), // Span the full document height...
width: '100%', // ...and full width

opacity: 0.2, // 设置遮罩层透明
backgroundColor: 'black',
zIndex: 5000  // tootip 的Zindex都是在 6000以上 为了确保 遮罩层在对话框一下，设置为5000
})
.appendTo(document.body) // 增加到文档中
.hide(0); // 初始化的时候隐藏