qTip2 Show

@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;

@author YHC 原文地址

以上如果有错误信息还请指出,thanks!

评论

1 楼 77219634 2018-01-06  

0127bf2236bee4dd1f632ce430f1af13 求大神解答