qTip2 Show
2012-07-27 10:56 java线程例子 阅读(204) 评论(0) 编辑 收藏 举报@author YHC
target:false
概述:
决定了那个HTML元素(s)将触发你定义的,show.event(s),当你设置为false的时候,这个元素的.qtip()方法根据使用调用;
示例:
这个示例第一个H1元素将引发显示qTip,当show.event时间被触发(在鼠标进入的时候)
$('.selector').qtip({ content: { text: 'You moused over the first H1 element on the document.' }, show: { target: $('h1:first') } });我们也可以使qTip在多个HTML元素上鼠标经过的时候显示:
$('.selector').qtip({ content: { text: 'You moused over a header element' }, show: { target: $('h1, h2, h3, h4') } });注意:设置不同的target,并不影响定位,它的控制是通过position.target选项;
event:"mouseenter"
概述:
Event(s)将在那一事件触发qTip显示,所有可用值都记录在jQueryEvent Bind文档中,多个事件以空格隔开是支持的.
示例:
下面的这个例子,当目标元素的click事件被触发之后,将触发qTip的显示;
$('.selector').qtip({ content: { text: 'I get shown on click' }, show: { event: 'click' } });你也可以定义多个事件,使用空格隔开字符串,下面的这个例子,将在目标元素(show.target)的click事件或者mouseover事件被触发的时候,将会触发qTip的显示:
$('.selector').qtip({ content: { text: 'I get shown on click' }, show: { event: 'click mouseenter' } });注意:mouseenter是不冒泡版本的mouseover,首选使用事件;
delay:140
概述:
当shou.event事件在show.target元素上触发的时候,使用毫秒数来延迟显示qTip:
示例:
在鼠标经过show.target元素1000ms( 1 second)之后显示:
$('.selector').qtip({ content: { text: 'I have a longer delay then default qTips' }, show: { delay: 1000 } });注意:这个的工作原理非常像 Brian Cherne的hoverIntent plugin插件
这个属性在IOS设备上将引发问题,例如iPad,iPhone,详细信息请见 click me
solo:false
概述:
当show.event在show.target之上触发,解决是否这个qTip显示的时候,隐藏所有其他的qTip提示,如果一个jQuery对象使用作为它的值,qTip仅仅这是查找包含在
内的qTip对象隐藏;
示例:
让我们创建一个简单的qTip,当我显示的时候,隐藏所有其他的qTip对象:
$('.selector').qtip({ content: { text: 'You won\' see me with any other tooltips... I\'m too cool for that!' }, show: { solo: true } });对于某些情况之下,我们只想仅仅隐藏一个qTip的子集,我们可以给他们定义一个共同的父容器:
$('.selector').qtip({ content: { text: 'I hide other tooltips when I\'m shown... booya!' }, show: { solo: $('.qtips') // Hide tooltips within the .qtips element when shown } });注意:在RC3(这个我不知道是什么,如果有人知道请告诉我,thanks!)里是可以的,允许指定那个qTip应该隐藏,这个的特性稍微和2.0有一些不同,
允许仅指定给那些qTip一个共同的父容器来替代;
ready:false
概述:
决定一旦文档(document)加载之后,qTip是否显,例如:当document.ready()事件被触发的时候:
示例:
创建一个qTip,在document load之后显示,这个在那种入门教程中,使用起来非常方便:
$('.selector').qtip({ content: { text: 'I\'m visible on page load' }, show: { ready: true } });注意:这个选项遵守你的show.delay的设置,如果你想qTip在一加载就显示,请设置这个为0
启用这个选项在多个qTip上,会使你的页面加载时间变慢;
effect:true
概述:
决定效果类型发生在qTip显示的时候,你也可以使用一个自定义方法,当调用的时候他的scope是qTip元素,如果设置为false,将没有动画发生;
示例:
让我们创建一个qTip,当他显示的时候,显示滑下效果,使用自定义animation回调函数;
$('.selector').qtip({ content: { text: 'I slide in when shown, none of this fading business for me!' }, show: { effect: function(offset) { $(this).slideDown(100); // "this" refers to the tooltip } } });注意:默认是fadein效果(淡入)效果,整个效果持续时间为90ms(毫秒)
modal:Ojbect
概述:
定义qTip的Modal 属性,详细信息请见documentation plugin 插件API;
以上如果有错误信息还请指出,thanks!