Chinaunix首页 | 论坛 | 博客
  • 博客访问: 780715
  • 博文数量: 372
  • 博客积分: 10063
  • 博客等级: 中将
  • 技术积分: 4220
  • 用 户 组: 普通用户
  • 注册时间: 2012-02-24 11:36
文章分类

全部博文(372)

文章存档

2012年(372)

分类: 虚拟化

2012-04-08 18:40:12

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

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

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

1
2
3

    我的博客地址: http://lwme.cnblogs.com/" target="_blank" title="囧月">囧月

通过设置position.target=event

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 选择demo1下有title属性的a标记
var elems = $('#demo1 a[title]')
// 移除title属性,保存title到tooltip属性中
.each(function(i) {
  $.attr(this, 'tooltip', $.attr(this, 'title'));
})
.removeAttr('title');
 
// 创建一个用于共享的tip
$('
').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,并跟随鼠标指针移动,实时显示当前指向目标的内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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的显示隐藏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 创建用于共享的tip
var api = $('
').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

阅读(628) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~