qTip2 Events

绑定事件:

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

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

Javascript代码  

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

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

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

Javascript代码  

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

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

event.preventDefault();

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

Javascript代码  

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

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

event.originalEvent

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

例如:右键点击事件

Javascript代码  

1. $('.selector').qtip({  
2.     content: 'Right-click to open me!',  
3.     show: 'mousedown',  
4.     events: {  
5.         show: function(event, api) {  
6.             // Only show the tooltip if it was a right-click  
7.             if(event.originalEvent.button !== 2) {  
8.                 event.preventDefault();  
9.             }  
10.         }  
11.     }  
12. });  

render:function(){}

概述:

qTip渲染时候触发;

例子:

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

Javascript代码  

1. $('.selector').qtip({  
2.     content: {  
3.         text: 'My tooltip content'  
4.     },  
5.     events: {  
6.         render: function(event, api) {  
7.             $('.cartTotal').triggerHandler('update');  
8.         }  
9.     }  
10. });