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

qTip2 Hide

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

@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 Chernehoverintent 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: $('<a href="http://google.com">Visit Google</a>'),
	},
	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!