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');
		}
	}
});

注意://有事..出去了,待会更新.........

@author YHC 查看原文