现在的位置: 首页 > easyui > Layout > tabs > 正文
tabs扩展:按照标签页ID进行检索
2014年05月13日 tabs ⁄ 共 2621字 评论数 6 ⁄ 被围观 8,578 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;
  21.             if (tabs.length == 0) {return;}
  22.             var panel = $(this).tabs('getTabById',id); // get the panel to be activated 
  23.             if (!panel){return}
  24.             var selected = $(this).tabs('getSelected');
  25.             if (selected){
  26.                 if (panel[0] == selected[0]){return}
  27.                 $(this).tabs('unselect',$(this).tabs('getTabIndex',selected));
  28.                 if (!selected.panel('options').closed){return}
  29.             }
  30.             panel.panel('open');
  31.             var title = panel.panel('options').title;        // the panel title 
  32.             selectHis.push(title);        // push select history 
  33.             var tab = panel.panel('options').tab;        // get the tab object 
  34.             tab.addClass('tabs-selected');
  35.             // scroll the tab to center position if required. 
  36.             var wrap = $(this).find('>div.tabs-header>div.tabs-wrap');
  37.             var left = tab.position().left;
  38.             var right = left + tab.outerWidth();
  39.             if (left < 0 || right > wrap.width()){
  40.                 var deltaX = left - (wrap.width()-tab.width()) / 2;
  41.                 $(this).tabs('scrollBy', deltaX);
  42.             } else {
  43.                 $(this).tabs('scrollBy', 0);
  44.             }
  45.             $(this).tabs('resize');
  46.             opts.onSelect.call(this, title, $(this).tabs('getTabIndex',panel));
  47.         });
  48.     },
  49.     existsById:function(jq,id){
  50.         return $(jq[0]).tabs('getTabById',id) != null;
  51.     }
  52. });

使用方法:

  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

目前有 6 条留言 其中:访客:4 条, 博主:2 条

  1. hanfeng : 2014年06月20日11:06:15  -49楼 @回复 回复

    按你的方式扩展了。var isExist = $(“tabs”).tabs(“existsById”,”tabId”);出现问题。Uncaught TypeError: Cannot read property ‘nodeName’ of undefined 搞不懂这个问题


    • 管理员
      世纪之光 : 2014年06月22日11:37:10  地下1层 @回复 回复

      要保证在tabs组件已经完成实例化的时候,再调用相关方法。

      • hanfeng : 2014年06月23日09:34:31  地下2层 @回复 回复

        好的,问题解决了,非常感谢!

  2. meguoe : 2015年07月13日09:09:08  -48楼 @回复 回复

    修改了所有相关接口以及属,详情情参见:http://www.yibeizi.us/thread-195023-1-1.html 链接失效了,能否发一份到我邮箱? meguoe@163.com


    • 管理员
      世纪之光 : 2015年07月13日11:24:17  地下1层 @回复 回复

      这个是通过修改源码的方式实现的,没有什么通用性。代码也丢失了,最好还是通过扩展的方式去实现吧,这样方便UI的升级。

  3. hitomishinya : 2015年11月27日10:53:19  -47楼 @回复 回复

    好棒好棒,解决了大问题! 赞,贴上去直接就能用。

给我留言

留言无头像?


×