@author YHC
特殊事件
qTip为你实现了一些自定义的hide和show事件,所以你不需要手动编写代码,现在还只有一个:unfocus,这个事件允许你隐藏qTip当任何qTip被点击的时候:
$('.selector').qtip({
content: {
text: 'I\'ll hide when you click anywhere else on the document',
},
hide: {
event: 'unfocus'
}
});
注意:这个仅仅只是qTip的事件,对任何正常的jQuery的bind/delegate/live,都是不起作用的.
target:false
概述:
决定那个html元素将触发你的hide.event(s)事件,当你设置为false的时候,这个元素的.qtip()方法将根据使用调用
示例:
这个示例将使用第一个H1元素来隐藏qTip,当hide.event事件被触发的时候(在鼠标的情况下)
$('.selector').qtip({
content: {
text: 'You hovered over the first H1 element on the document. Well done you!',
},
hide: {
target: $('h1:first')
}
});
我们也可以使鼠标在多个元素上离开的时候关闭qTip,例如:下面的所有标题元素:
$('.selector').qtip({
content: {
text: 'If you mouse over a header element, I\'ll hide!',
},
show: {
ready: true
},
hide: {
target: $('h1, h2, h3, h4')
}
});
注意:设置多个不同的隐藏目标,并不影响定位,它的控制是通过position.target选项;
event:"mouseleave"
概述:
Event(s)那一个触发qTip的hide事件,所有可用值都记录在jQueryEvent bind()文档中,多个事件以空格隔开是支持的:
示例:
下面的这个例子将是目标元素被点击的时候,使qTip隐藏;
$('.selector').qtip({
content: {
text: 'I get hidden on click',
},
hide: {
event: 'click'
}
});
你也可以定义多个事件使用空格隔开字符串,下面的这个例子当你的目标元素hide.target的click和mouseout事件被触发的时候,将是qTip隐藏;
$('.selector').qtip({
content: {
text: 'I get hidden on click or when you mouseout my hide.target',
},
hide: {
event: 'click mouseleave'
}
});
注意:mouseleave是不冒泡的版本的mouseout,这个是优先选择使用事件
delay:0
概述:
当hide.target目标元素的hide.event事件被触发的时候,通过延时隐藏qTip,时间的单位是millisecond(毫秒 故缩写 ms)
示例:
这个示例是在当你的鼠标在hide.target上离开之后的1000毫秒(1秒)隐藏:
$('.selector').qtip({
content: {
text: 'I have a longer delay then default qTips',
},
hide: {
delay: 1000
}
});
注意:这个的工作原理非常像
Brian Cherne hoverintent plugin插件;
inactive:false
概述:
时间是以毫秒为单位,在剩余的时间之后它是不活动的,那么应该隐藏该qTip,例如:它们不是互相作用的,如果设置为false,qTip在不活动的时候将不会隐藏;
示例:
让我们创建一个qTip让其点击事件触发之后显示,但是隐藏仅仅只是在不活跃的3秒之后:
$('.selector').qtip({
content: {
text: 'I\'ll disappear after three seconds of inactivity... :(',
},
show: 'click',
hide: {
event: false,
inactive: 3000
}
});
注意:在1.0的inactive事件应用是通过hide.event选项,和使用hide.delay定义inactivity所需持续时间;
fixed:false
概述:
当这个选项设置为true的时候,当鼠标离开之后,qTip不会隐藏,允许内容被点击,他们是可交互的;
示例:
创建一个qTip在一个超链接里面,在鼠标离开之后不隐藏:
$('.selector').qtip({
content: {
text: $('Visit Google'),
},
hide: {
fixed: true
}
});
注意:添加一个hide.delay通常是解决,当这项启用了,并给用户时间,在鼠标离开之前隐藏;
主要是用于结合mouseout和类似的鼠标导航的隐藏事件;
leave:"window":
概述:
附加的隐藏设置允许你定义qTip是否隐藏,当你离开window,它还包含在内,这个选项你必须使用这两个事件的其中之一mouseover或者(其中之一)mouseleave作为你的hide事件;
示例:
这个qTip将不会隐藏,当你的鼠标离开window,例如tab切换到其他的window/tab,或者点击一个超链接打开一个新的window;
$('.selector').qtip({
content: {
text: 'I will not hide when you click the link I target (.selector)',
},
hide: {
leave: false
}
});
注意:这个仅仅只是应用于当你使用mouseover或者mouseout这两个的其中之一作为你的隐藏事件;
distance:false
概述:
这个设置允许你决定距离qTip多少距离之后qTip隐藏,当鼠标移至那个点将触发qTip.这个跟常规浏览器的提示行为很像;
示例:
让我们模仿常规浏览器的提示,通过使用distance选项为鼠标设置:
$('.selector').qtip({
content: {
text: 'I behave exactly like a regular browser tooltip',
},
position: {
target: 'mouse', // Position at the mouse...
adjust: { mouse: false } // ...but don't follow it!
}
hide: {
distance: 15 // Hide it after we move 15 pixels away from the origin
}
});
注意:这个事件本身可以归类作为一个隐藏选项,鼠标最初在show.target上的位置,决定使用计算距离的坐标;
effect:true
概述:
决定效果类型,他发生在隐藏qTip的时候,你也可以使用一个自定义方法,他的scope是qTip元素,当调用的时候,如果设置为false,没有任何的效果发生:
示例:
让我们创建一个qTip,当隐藏的时候让他滑下,使用自定义animation回调函数:
$('.selector').qtip({
content: {
text: 'I slide in when hidden, none of this fading business for me!'
}
hide: {
effect: function(offset) {
$(this).slideDown(100); // "this" refers to the tooltip
}
}
});
注意:默认是fadeOut效果整个发生持续90毫秒;
@author YHC 原文地址
以上均是上班时间写的,由于时间比较紧,如果有错误还请大家提出,thanks!