代码改变世界

qTip2小技巧:为多个目标元素共享一个tip

2012-04-07 21:50 by 囧月, ... 阅读, ... 评论, 收藏, 编辑

jQuery为元素提供click、bind等方法绑定事件,但假如需要绑定事件的元素过多的话(如$("a")),不管是查找元素还是逐个绑定事件都比较影响效率;所以jQuery还提供了效率更高live方法,以及效率最高的delegate方法,来处理此类问题。

在使用qTip2的时候,也存在绑定tip的效率问题,不但要查找元素、绑定事件、及为每一个元素创建tip,比较浪费资源;幸好,qTip2也提供了类似live/delegate的方式来绑定tip;当然,如果嫌qTip2提供的不够好,那也完全可以用jQuery.delegate方法来实现。

以下就这3种方式来实现为多个目标共享一个tip逐一演示,首先假定页面存在以下元素:

	<p id="demo1">
		我的博客地址: <a href="http://lwme.cnblogs.com/" target="_blank" title="囧月">囧月</a>
	</p>

通过设置position.target=event

这也是官方DEMO中使用的方法,主要演示为有title属性的a标记显示tip:

  // 选择demo1下有title属性的a标记
  var elems = $('#demo1 a[title]')
  // 移除title属性,保存title到tooltip属性中
  .each(function(i) {
    $.attr(this, 'tooltip', $.attr(this, 'title'));
  })
  .removeAttr('title');

  // 创建一个用于共享的tip
  $('<div />').qtip(
  {
    content: ' ',
    position: {
      target: 'event', // 通过事件响应
      effect: false 	// 关闭默认的 'slide' 动画效果          
    },
    show: {
      target: elems // 设置显示的目标元素
    },
    hide: {
      target: elems
    },
    events: {
      show: function(event, api) {
        // 更新tip内容
        var target = $(event.originalEvent.target);

        if(target.length) {
          api.set('content.text', target.attr('tooltip'));
        }
      }
    }
  });

通过设置positon.target=mouse

这种方法通过在指定区域创建一个tip,并跟随鼠标指针移动,实时显示当前指向目标的内容:

  var setText = function(event, api) {
    var target = $(event.originalEvent && event.originalEvent.target);
    
    if(target.length) {
      api.set('content.text', target.text()); // 更新内容
    }
  };

  // 在指定区域创建用于共享的tip
  $('#demo1').qtip(
  {
    content: ' ',
    position: {
      target: 'mouse', // 跟随鼠标指针
      effect: false, // 关闭效果
      viewport: $(window),
      adjust: { x: 10, y: 10 } // tip位置偏移,防止遮住鼠标指针
    },
    events: {
      show: setText,
      move: setText // 移动时也设置内容
    }    
  });

当然,这种方法有一个缺点,就是无法针对容器内特定的标记进行提示,所以这种方法比较适用于表格。

PS:或许是我没找到方法,反正通过api的show/hide方法,经常会显示不出来。

通过jQuery的delegate绑定事件

这种方法是直接创建一个tip,然后通过mouseover/mouseout事件来控制tip的显示隐藏

  // 创建用于共享的tip
  var api = $('<div />').qtip(
  {
    content: ' ',
    show: {
      event: false
    }
  }).qtip("api");
  
  // 监听事件
  $("#demo1").delegate("a", "mouseover mouseout", function(e) {
    if (e.type == 'mouseover') {
      api.set('position.target', $(this));
      api.set('content.text', this.innerHTML);
      api.show();
    } else 
      api.hide();
  });

结尾

以上方法仅仅只是一些尝试,还有一些不完善的地方,当然相对来说还是官方DEMO提供的方法完善一些;如果哪位TX有更好的方法,也请提供下。

最后还是提供一下DEMO