现在的位置: 首页 > easyui > Layout > tabs > 正文
tabs扩展:给tabs组件绑定双击事件
2013年01月10日 tabs ⁄ 共 1137字 评论数 3 ⁄ 被围观 11,301 views+
文章目录
[隐藏]

最近有些朋友问如何给tabs的header绑定双击事件,他们主要是想在双击事件里面“关闭”或者“最大化”tabs组件。tabs组件自身并没有提供dblclick事件接口,不过tabs组件的DOM结构非常简单,我们自己绑定也很容易,直接上代码了:

实现代码:

  1. $.extend($.fn.tabs.methods, {
  2.     /**
  3.      * 绑定双击事件
  4.      * @param {Object} jq
  5.      * @param {Object} caller 绑定的事件处理程序
  6.      */
  7.     bindDblclick: function(jq, caller){
  8.         return jq.each(function(){
  9.             var that = this;
  10.             $(this).children("div.tabs-header").find("ul.tabs").undelegate('li', 'dblclick.tabs').delegate('li', 'dblclick.tabs', function(e){
  11.                 if (caller && typeof(caller) == 'function') {
  12.                     var title = $(this).text();
  13.                     var index = $(that).tabs('getTabIndex', $(that).tabs('getTab', title));
  14.                     caller(index, title);
  15.                 }
  16.             });
  17.         });
  18.     },
  19.     /**
  20.      * 解除绑定双击事件
  21.      * @param {Object} jq
  22.      */
  23.     unbindDblclick: function(jq){
  24.         return jq.each(function(){
  25.             $(this).children("div.tabs-header").find("ul.tabs").undelegate('li', 'dblclick.tabs');
  26.         });
  27.     }
  28. });

使用方式:

  1. $(function(){
  2.     $('#tb').tabs('bindDblclick', function(index, title){
  3.         alert(title + ':' + index);
  4.     });
  5. });

目前有 3 条留言 其中:访客:1 条, 博主:1 条 引用: 1

  1. 疯子 : 2013年09月22日16:34:18  -49楼 @回复 回复

    tree 中 OnClick 和OnDbClick事件不能同时使用,当执行双击事件时。他要重新执行单击事件.由于我在两个事件中分别要处理不同的数据。。所以就出问题了。。请老师给点解决方法。。


    • 管理员
      世纪之光 : 2013年09月22日18:08:53  地下1层 @回复 回复

      可以试试用全局变量的方式,比如全局变量”a”用于记录单击事件是否被执行,变量”b”记录是否双击事件是否被执行,然后在单击和双击事件中分别对”b”和”a”做判断,不过单击事件估计得设置一个延时执行才行,因为单击事件是先被触发的,不延时执行的话,得不到b。

给我留言

留言无头像?


×