qTip2 Events

绑定事件:

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