jQuery EasyUI的tabs组件里，几乎所有涉及到标签页检索的接口，都只提供了根据标签页的title或者index检索，并没有提供根据ID检索的功能。 不光是缺失根据ID检索的能力，即便是只根据title或者index去检索，相关接口设计得也很不合理，根据title或者index检索却只提供一个参数，看似功能灵活，实质上，个人觉得是语义不清，不提倡这种写法。 通过修改源码的方式让tabs组件支持按照ID检索是很容易的，但修改源码影响正常的版本升级。如果使用扩展的方式，涉及到的接口太多，如果想统统扩展一下，基本上等于把tabs组件重写一次了。
扩展方式实现
本文只举两个扩展方式的例子，实现select和exists两个接口按照ID检索功能，其它类似接口，可以仿照着写：
- /**
- * @author {CaoGuangHui}
- */
- $.extend($.fn.tabs.methods, {
- getTabById: function(jq,id) {
- var tabs = $.data(jq[0], 'tabs').tabs;
- for(var i=0; i<tabs.length; i++){
- var tab = tabs[i];
- if (tab.panel('options').id == id){
- return tab;
- }
- }
- return null;
- },
- selectById:function(jq,id) {
- return jq.each(function() {
- var state = $.data(this, 'tabs');
- var opts = state.options;
- var tabs = state.tabs;
- var selectHis = state.selectHis;
- if (tabs.length == 0) {return;}
- var panel = $(this).tabs('getTabById',id); // get the panel to be activated
- if (!panel){return}
- var selected = $(this).tabs('getSelected');
- if (selected){
- if (panel[0] == selected[0]){return}
- $(this).tabs('unselect',$(this).tabs('getTabIndex',selected));
- if (!selected.panel('options').closed){return}
- }
- panel.panel('open');
- var title = panel.panel('options').title; // the panel title
- selectHis.push(title); // push select history
- var tab = panel.panel('options').tab; // get the tab object
- tab.addClass('tabs-selected');
- // scroll the tab to center position if required.
- var wrap = $(this).find('>div.tabs-header>div.tabs-wrap');
- var left = tab.position().left;
- var right = left + tab.outerWidth();
- if (left < 0 || right > wrap.width()){
- var deltaX = left - (wrap.width()-tab.width()) / 2;
- $(this).tabs('scrollBy', deltaX);
- } else {
- $(this).tabs('scrollBy', 0);
- }
- $(this).tabs('resize');
- opts.onSelect.call(this, title, $(this).tabs('getTabIndex',panel));
- });
- },
- existsById:function(jq,id){
- return $(jq[0]).tabs('getTabById',id) != null;
- }
- });
使用方法：
- var tab = $("tabs").tabs("selectById","tabId");
- var isExist = $("tabs").tabs("existsById","tabId");
这段代码扩展了三个接口，但是只有selectById和existById才会直接用到，使用这两个方法的时候传入ID参数即可。需要注意的是：标签页的ID属性不是自动产生的，要在使用add方法或者用DOM初始化时设置对应panel的id属性。
修改源码方式
修改了所有相关接口以及属，详情情参见：http://www.yibeizi.us/thread-195023-1-1.html
管理员 世纪之光 : 2014年06月22日11:37:10 地下1层
管理员 世纪之光 : 2015年07月13日11:24:17 地下1层