qTip2 Events

@author YHC

绑定事件:

这个API触发一些特殊的事件(以下详细信息),允许你给qTip分配多个时间监听,和为某一事件做出响应,例如:

我们绑定一个事件句柄,它将侦听qTip的移动的事件,和更新DIV元素里面显示的qTip的坐标内容;

$('.selector').qtip({
	content: 'When I move I update coordinates on the page!',
	events: {
		move: function(event, api) {
			$('#coords').text( event.pageX + '/' + event.pageY );
		}
	}
});

非常好!非常简单,而且易于集成,然而,如果我们需要的不仅仅只是更新坐标,对于整合其他插件来说的话,其中的一个问题就是,一个可能就是在不同的文件难以调用

我们内部已经存在的回调函数!

$('.selector').qtip({
	content: 'When I move I update coordinates on the page!',
	events: {
		/* 
		 *所以你的qTip的prerender将有可能设置为false,我们将绑定在render事件上 
		 *所以我们需要确定qTip在实际渲染之前绑定我们的事件处理函数.
		 */
		render: function(event, api) {
			// 从API元素对象提取qTip元素
			var tooltip = api.elements.tooltip;
 
			//注意'tooltip'是事件名的前缀 
			tooltip.bind('tooltipmove', function(event, api) { 
				anotherPlugin.update(event); // 更新我们其他插件并传入我们的事件对象
			})
 
		},
		// 老的move事件选项任然应用
		move: function(event, api) {
			$('#coords').text( event.pageX + '/' + event.pageY );
		}
	}
});

oh!非常棒!绑定多个事件是如此的简单,所有的可用事件列表如下,仅仅需要注意的是你的事件的前缀的名称是tooltip,当你手动绑定事件的时候;

event.preventDefault();

在这种情况下,使用Javascript标准函数,你可使用event.preventDefault(),来防止默认的事件发生,例如,在show事件中停止qTip显示:

$('.selector').qtip({
	content: '我将不会显示,因为我的一个show事件返回了false!',
	show: 'mousedown',
	events: {
		show: function(event, api) {
			event.preventDefault(); // Stop it!
		}
	}
});

如果你需要在一些逻辑条件下决定显示还是不显示,使用这个非常方便,另外需要注意的是,任何的事件处理,都可以停止默认的动作,不仅仅是第一个绑定;

event.originalEvent

下面所有的事件都传入一个event对象最为第一个参数,在这个event对象中有另外一个对象叫originalEvent,这个包含这个事件触发的回调,可以使用它来检测特殊事件,

例如:右键点击事件

$('.selector').qtip({
	content: 'Right-click to open me!',
	show: 'mousedown',
	events: {
		show: function(event, api) {
			// Only show the tooltip if it was a right-click
			if(event.originalEvent.button !== 2) {
				event.preventDefault();
			}
		}
	}
});

render:function(){}

概述:

qTip渲染时候触发;

例子:

更新其他元素,例如一个购物车的总数,当qTip渲染的时候;

$('.selector').qtip({
	content: {
		text: 'My tooltip content'
	},
	events: {
		render: function(event, api) {
			$('.cartTotal').triggerHandler('update');
		}
	}
});

注意:渲染的过程中不能使用preventDefault()打断,上面所描述的;

         在一个qTip的生命周期,该事件仅仅只是触发一次;

 show:function(){}

概述:

在qTip通过js类库本身显示的时候触发,或者通过用户调用toggle或者是show API方法时候触发;

示例:

让我们在每当这个qTip显示的时候就隐藏另一个元素:

$('.selector').qtip({
	content: {
		text: 'I hide another element when shown...'
	},
	events: {
		show: function(event, api) {
			$('.hideMe').hide();
		}
	}
});

注意:使用上面描述的preventDefault(),将阻止qTip显示.

hide:function(){}

概述:

当qTip通过js函数库本身隐藏的时候触发,或者通过用户显示调用toggle或者hide API方法的时候触发;

示例:

让我们每当这个qTip元素隐藏的时候,显示一个其他的元素:

$('.selector').qtip({
	content: {
		text: 'I cause another element to show when I\'m hidden...'
	},
	events: {
		hide: function(event, api) {
			$('.showMe').show();
		}
	}
});

注意:使用上面描述的preventDefault(),将阻止qTip隐藏;

toggle:function(){}

概述:

当qTip状态切换的时候触发,例如:show/hide,或者通过用户显示调用toggle 或者 hide API方法的时候触发,这是用来绑定上面的tooltipshow和tooltiphide

这个两个事件的最为快捷的方法.

示例:

我们使用这个show或者hide,快速的实现添加或者移除一个特定的属性,想类一样,没有重复的代码:

$('.selector').qtip({
	content: {
		text: 'I toggle a class on my target element when shown or hidden!'
	},
	events: {
		toggle: function(event, api) {
			api.elements.target.toggleClass(event.type === 'tooltipshow');
		}
	}
});

注意:这里没有tooltiptoggle这个事件,它只是一个绑定这个两个tooltipshow和tooltiphide的快速实现;

         使用上面描述的preventDefault(),将阻止tootip的show或者hide,根据事件的类型触发;

visiable:function(){}

概述:

当qTip开始显示的时候触发,例如:在show.effect完成后和qTip可见而且有显示尺寸之后触发,插件和代码需要qTip布局的时候,这个是非常有用的,当他可见而且有尺寸的时候,

如果这个是一个function他将正确执行;

因为这个事件触发之后qTip已经显示了,如果event.preventDefault();调用了,在这个事件将什么也不做,因为qTip已经显示了,当这个时候触发之后;

示例:

让我们创建一个qTip让其显示的时候,隐藏另一个元素:

$('.selector').qtip({
	content: {
		text: 'I hide another element when shown...'
	},
	events: {
		visible: function(event, api) {
			$('.selector').hide();
		}
	}
});

注意:这个与show event是有很大的区别滴!,它是在show动作之前完成的,亲!记住,不是之后完成的;

        由于上述event.preventDefault()被调用在这个事件里什么也不做,因为qTip已经显示了,当这个时候触发的时候;

hidden:function(){}

概述:

当qTip开始隐藏的时候触发,例如:在hidden.effect已经完成,qTip已经隐藏(亲,这个你懂的->display:none),当插件和代码需要qTip完全隐藏之后做某事..这个是非常有用的,

如果它是一个函数将正确执行

因为这个事件触发之后qTip已经隐藏,event.preventDefault()被调用,在这个事件将什么也不做,因为这个事件触发后qTip已经隐藏了;

示例:

当qTip隐藏的时候,显示另一个元素:

$('.selector').qtip({
	content: {
		text: 'I show another element when hidden...'
	},
	events: {
		hidden: function(event, api) {
			$('.selector').show();
		}
	}
});

注意:这个是与hide event有很大的不同滴....,因为是在hide动作之前完成的,不是之后;

         综上所述event.preventDefault()被调用这个事件将什么也不做,因为qTip已经隐藏了,当这个事件触发的时候;

move:function(){}

概述:

当qTip重新定位的时候触发,也可以通过函数库本身触发,或者当用户调用reposition API方法的时候触发;

示例:

让我们更新另一个qTip的position

$('.selector').qtip({
	content: {
		text: 'When I move, I update all qTips who are positioned in relation to me!'
	},
	events: {
		move: function(event, api) {
			// For more information on the API object, check-out the API documentation
			api.elements.content.find('.hasTooltip').qtip('update');
		}
	}
});

注意:使用上面描述的event.preventDefault()将阻止tooltip位置更新;

focus:function(){}

概述:

当qTip获得焦点时候触发,例如:最近显示的或者mouseover,也可以通过库本身或者focus API方法;

示例:

让我们创建一个qTip,谁获得焦点,谁的颜色就改变;

$('.selector').qtip({
	content: {
		text: 'When I gain focus over the other qTips, my colour changes!'
	},
	events: {
		focus: function(event, api) {
			// For more information on the API object, check-out the API documentation
			api.elements.tooltip.toggleClass('ui-tooltip-blue ui-tooltip-cream');
		}
	}
});

注意:使用上面描述的preventDefault(),将阻止他获得焦点;

blur:function(){}

概述:

当qTip离开焦点的时候触发,例如另一个qTip获得焦点(请见上面),类似的示例在上面:

$('.selector').qtip({
	content: {
		text: 'When I lose focus to another qTip, my colour changes!'
	},
	events: {
		blur: function(event, api) {
			// For more information on the API object, check-out the API documentation
			api.elements.tooltip.toggleClass('ui-tooltip-blue ui-tooltip-cream');
		}
	}
});

注意:在离开焦点的过程中,尽量的避免使用上面描述的preventDefault();

 @author YHC                    查看原文