现在的位置: 首页 > easyui > Layout > tabs > 正文
tabs扩展:给tabs组件绑定双击事件
2013年01月10日 tabs ⁄ 共 1137字 评论数 3 ⁄ 被围观 13,238 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楼 @回复 回复

给我留言

留言无头像?


×