现在的位置: 首页 > easyui > Layout > tabs > 正文
小 中 大
tabs扩展:按照标签页ID进行检索
2014年05月13日 ⁄ tabs ⁄ 共 2621字 ⁄ 评论数 7 ⁄ 被围观 14,402 views+
文章目录
[隐藏]

jQuery EasyUI的tabs组件里，几乎所有涉及到标签页检索的接口，都只提供了根据标签页的title或者index检索，并没有提供根据ID检索的功能。 不光是缺失根据ID检索的能力，即便是只根据title或者index去检索，相关接口设计得也很不合理，根据title或者index检索却只提供一个参数，看似功能灵活，实质上，个人觉得是语义不清，不提倡这种写法。 通过修改源码的方式让tabs组件支持按照ID检索是很容易的，但修改源码影响正常的版本升级。如果使用扩展的方式，涉及到的接口太多，如果想统统扩展一下，基本上等于把tabs组件重写一次了。

扩展方式实现

本文只举两个扩展方式的例子，实现select和exists两个接口按照ID检索功能，其它类似接口，可以仿照着写：

  1. /**
  2.  * @author {CaoGuangHui}
  3.  */
  4. $.extend($.fn.tabs.methods, {
  5.     getTabById: function(jq,id) {
  6.         var tabs = $.data(jq[0], 'tabs').tabs;
  7.         for(var i=0; i<tabs.length; i++){
  8.             var tab = tabs[i];
  9.             if (tab.panel('options').id == id){
  10.                 return tab;
  11.             }
  12.         }
  13.         return null;
  14.     },
  15.     selectById:function(jq,id) {
  16.         return jq.each(function() {
  17.             var state = $.data(this, 'tabs');
  18.             var opts = state.options;
  19.             var tabs = state.tabs;
  20.             var selectHis = state.selectHis;
  22.             if (tabs.length == 0) {return;}
  24.             var panel = $(this).tabs('getTabById',id); // get the panel to be activated 
  25.             if (!panel){return}
  27.             var selected = $(this).tabs('getSelected');
  28.             if (selected){
  29.                 if (panel[0] == selected[0]){return}
  30.                 $(this).tabs('unselect',$(this).tabs('getTabIndex',selected));
  31.                 if (!selected.panel('options').closed){return}
  32.             }
  34.             panel.panel('open');
  35.             var title = panel.panel('options').title;        // the panel title 
  36.             selectHis.push(title);        // push select history 
  38.             var tab = panel.panel('options').tab;        // get the tab object 
  39.             tab.addClass('tabs-selected');
  41.             // scroll the tab to center position if required. 
  42.             var wrap = $(this).find('>div.tabs-header>div.tabs-wrap');
  43.             var left = tab.position().left;
  44.             var right = left + tab.outerWidth();
  45.             if (left < 0 || right > wrap.width()){
  46.                 var deltaX = left - (wrap.width()-tab.width()) / 2;
  47.                 $(this).tabs('scrollBy', deltaX);
  48.             } else {
  49.                 $(this).tabs('scrollBy', 0);
  50.             }
  52.             $(this).tabs('resize');
  53.             opts.onSelect.call(this, title, $(this).tabs('getTabIndex',panel));
  54.         });
  55.     },
  56.     existsById:function(jq,id){
  57.         return $(jq[0]).tabs('getTabById',id) != null;
  58.     }
  59. });

使用方法：

  1. var tab = $("tabs").tabs("selectById","tabId");
  2. var isExist = $("tabs").tabs("existsById","tabId");

这段代码扩展了三个接口，但是只有selectById和existById才会直接用到，使用这两个方法的时候传入ID参数即可。需要注意的是：标签页的ID属性不是自动产生的，要在使用add方法或者用DOM初始化时设置对应panel的id属性。

修改源码方式

修改了所有相关接口以及属，详情情参见：http://www.yibeizi.us/thread-195023-1-1.html

返回

作者:

【上篇】
【下篇】

您可能还会对这些文章感兴趣！

  1. 实现tabs组件IFrame模式的遮罩效果
  2. tab组件的小工具条handler入参无法获取事件对象
  3. tabs扩展:给tabs组件绑定双击事件
  4. 事件冒泡引起的tabs组件二次请求
  5. 正确对待panel和tabs组件的cache属性
  6. 浅谈 easyui tabs 的href和content属性
  7. jQuery easyui tabs 增加 onDblClick 事件
jQuery easyui layout 布局脚本收缩bug
Layout小扩展:提供增删region头部方法
一个问题的思考
将my97日期控件集成到easyui框架中

目前有 7 条留言 其中：访客:5 条, 博主:2 条

  1. hanfeng : 2014年06月20日11:06:15  -49楼 @回复 回复
  2. meguoe : 2015年07月13日09:09:08  -48楼 @回复 回复
  3. hitomishinya : 2015年11月27日10:53:19  -47楼 @回复 回复

给我留言

留言无头像?


插入图片

返回首页

Copyright © 2012-2017 WebUI框架使用参考  保留所有权利.   Theme by Robin
×