@author YHC
text:true
概述:
text/HTML将出现在qTip初始化之后,如果设置为true(e.g.:text:true),将会使用目标元素的标题属性(e.g.:<div title='why LOVE HC?')做为提示信息显示,前提是目标元素标题可用
也可以定义一个匿名函数来返回提示内容,他的范围是目标元素;
示例:
创建一个默认的qTip,并且提示内容是"My tooltip content"
$('.selector').qtip({ content: { text: 'My tooltip content' }}); 我们也使用其他的jQuery元素来作为它的提示内容
$('.selector').qtip({ content: { text: $('.selector2') // Add .clone() 如果你不想匹配的元素被移除,可以使用clone }}); 我们也可以使用自定义函数来检索目标元素的特殊属性,作为提示信息
$('.selector').qtip({ content: { text: function(api) { // 检索$('.selector')元素的自定义属性,作为提示信息 return $(this).attr('qtip-content'); } }}); 注意:自定义函数如果返回的是无效的内容,任然会影响到qTip的创建,替换这些each()循环,如果不是你期望的行为; 如果这两个属性检测到无效内容,和下面的content.attr选项将不会渲染qTip提示信息;
attr:'title'
概述:
目标元素的属性作为提示信息,如果没有提供或者有无效的内容被发现将会使用上面的content.text选项;
示例:
让我们创建一个qTip,来给所有的图片做提示,他的提示内容来自img的alt属性:
$('img[alt]').qtip({ content: { attr: 'alt' }}); 这个对图片类和图片站点导航非常有用的,和他们需要良好的视觉线索和上下文; 注意:如果在元素属性中发现无效内容而且content.text没有定义那么将没有qTip渲染到页面;
title.text:false 概述:
text/html 将出现在标题元素里面的内容,如果设置false,没有title被创建,一个匿名的函数也可以用来返回title元素的内容,他的范围是目标元素;
示例:
创建一个 'About me'的提示信息和一个标题来指明内容是关于什么的:
$('.selector').qtip({ content: { text: 'I really like owls!', title: { text: 'About me' } }}); 我们也可以使用其他的jQuery的元素来作为qTip的title
$('.selector').qtip({ content: { title: { text: $('.selector2') // Add .clone() if you don't want the matched elements to be removed, but simply copied } }}); 我们也可以使用一个自定义函数来返回title内容
$('.selector').qtip({ content: { text: 'Custom title text functions... hoorah!', title: { text: function(api) { // Retrieve content from ALT attribute of the $('.selector') element return $(this).attr('alt'); } } }}); 注意:自定义函数返回的是无效内容的时候仍然会影响到qTip的创建,替换这些each()循环,如果不是你期望的行为的时候; 如果提供的是无效的内容,title将不会创建;
title.button:false
概述:
text/HTML将出现在标题内部的按钮元素,(e.g.close link)位于title元素内容的右边.当你点击的按钮的时候这个按钮将关闭提示信息,
示例:
创建另一个'About me'的提示信息,开启点击,当你点击按钮的时候仅仅只是隐藏起来,
$('.selector').qtip({ content: { text: 'I really like owls!', title: { text: 'About me', button: 'Close' } }, hide: { event: false }}); 你也可以设置这个属性为true,他会默认创建一个格式化按钮; 注意:button属性仅仅只是在title属性被定义和title.text被定义而且可用的时候出现;
如果提供的是无效的内容,button将不会被创建;
ajax:Object
概述
定义qTip的ajax属性内容,请见这里的信息更为详细;
以上如果有错误的地方还请大家提出,thanks!