一 获取选中的 Tab
1. // 获取选中的 tab panel 和它的 tab 对象
2. var pp = $('#tt').tabs('getSelected');
3. var tab = pp.panel('options').tab; // 相应的 tab 对象
注:根据指定tab的title 获取tab对象接口使用方式如下:
var tab = $('#tt').tabs('getTab','title'),
二 更新特定的选项卡面板 可使用update方法,param参数包含2个属性:
tab: 将被更新的选项卡。
options: 选项卡相关配置项。
//当前被选中的tab var current_tab = $('#frame_tabs').tabs('getSelected'); $('#frame_tabs').tabs('update',{ tab:current_tab, options : { content : '<iframe scrolling="auto" frameborder="0" src="'+URL+'" style="100%;height:100%;"></iframe>', //或者 href : ''; } });
1.创建tab,同时捕捉 'onSelect' 事件
$('#tt').tabs({ border:false, onSelect:function(title){ alert(title+' is selected'); } });
2.增加新的tab panel
$('#tt').tabs('add',{ title:'New Tab', content:'Tab Body', closable:true });
三 tabs 动态加载iframe
$('#EasyTabs').tabs('add', { title: tabTitle, content: '<iframe frameborder="0" src="' + ContentUrl + '" style="100%;height:100%;"></iframe>', iconCls: 'icon-tip', closable: true, tools: [{ iconCls: 'icon-mini-refresh', handler: function () { alert('refresh'); } }] });
EasyUI相同的Tab只打开一个(即EasyUI方法的调用方法)
function addTabA(title){ if ($('#tt').tabs('exists', title)){ $('#tt').tabs('select', title); } else { $('#tt').tabs('add',{ title:title, content:'Tab Body ' , iconCls:'icon-save', closable:true }); } } jQuery EasyUI的其他方法调用方式相似 例如:layout 默认收起 $('#layout').layout('collapse', 'north');