欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

qTip2 Show

程序员文章站 2022-07-16 08:06:06
...

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