现在的位置: 首页 > easyui > Layout > tabs > 正文
tab组件的小工具条handler入参无法获取事件对象
2013年03月07日 tabs ⁄ 共 1552字 评论数 1 ⁄ 被围观 7,452 views+
文章目录
[隐藏]

现象分析:

我们经常使用以下代码添加tab选项卡:

  1. $('#tt').tabs('add', {   
  2.     title: 'tab4',   
  3.     closable: true,   
  4.     cache: true,   
  5.     tools: [{   
  6.         iconCls: 'icon-mini-refresh',   
  7.         handler: function(e) {   
  8.             alert(e)//弹出undefined   
  9.         }   
  10.     }]   
  11. });  

在handler中,我们试图打印e对象,结果却是undefined,原因很简单,tabs组件的源码在绑定事件的时候,用的是call方式,而且确实是没有传参的call。

修复方式:

要想对此做修复也不难,重新绑定一下小工具的事件即可,因此,我写了一个扩展,调用这个扩展的方法后即可将事件对象传到handler里面:

  1. /**  
  2.  * @author {CaoGuangHui}  
  3.  */  
  4. $.extend($.fn.tabs.methods, {   
  5.     /**
  6.      * tabs组件每个tab panel对应的小工具条绑定的事件没有传递事件参数  
  7.      * 本函数修正这个问题  
  8.      * @param {[type]} jq [description]  
  9.      */  
  10.     addEventParam: function(jq) {   
  11.         return jq.each(function() {   
  12.             var that = this;   
  13.             var headers = $(this).find('>div.tabs-header>div.tabs-wrap>ul.tabs>li');   
  14.             headers.each(function(i) {   
  15.                 var tools = $(that).tabs('getTab', i).panel('options').tools;   
  16.                 if (typeof tools != "string") {   
  17.                     $(this).find('>span.tabs-p-tool a').each(function(j) {   
  18.                         $(this).unbind('click').bind("click", {   
  19.                             handler: tools[j].handler   
  20.                         }, function(e) {   
  21.                             if ($(this).parents("li").hasClass("tabs-disabled")) {   
  22.                                 return;   
  23.                             }   
  24.                             e.data.handler.call(this, e);   
  25.                         });   
  26.                     });   
  27.                 }   
  28.             })   
  29.         });   
  30.     }   
  31. });  

使用也很简单:

  1. $('#tt').tabs('addEventParam');  

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

    给我留言

    留言无头像?


    ×