EasyUI 是一個非常流行的 jQuery 插件庫,用于創建美觀的 Web 應用程序界面。其中的 Tabs 組件是一個非常常用的功能,可以使用 Tabs 組件來切換多個頁面內容。在 EasyUI 中,還提供了 TabsAdd 方法,可以使用它來動態添加 Tabs。
$('#tt').tabs('add',{ title:'Tab1', content:'Tab1 content', iconCls:'icon-add', closable:true, selected:true, method: 'get', url:'/getTabData/1' });
在使用 TabsAdd 方法之前,需要先定義好 Tabs 組件以及需要添加的 Tabs 配置信息。其中包括標題、內容、圖標、是否允許關閉等等。另外,還可以使用 TabsAdd 方法傳遞一個 JSON 對象來實現從后臺獲取數據并動態添加 Tabs。
$('#tt').tabs('add',{ title:'Tab1', content:'Tab1 content', iconCls:'icon-add', closable:true, selected:true, method: 'get', url:'/getTabData/1', onLoad:function(data){ $('#tt').tabs('update', { tab: $('#tt').tabs('getSelected'), options: {content: data} }); } });
在這個示例中,Tabs 組件會使用 AJAX 方式從后臺請求數據,然后將數據作為參數傳遞給 onLoad 方法。在 onLoad 方法中,可以使用 Tabs 組件的 update 方法來更新 Tabs 內容。這里的 update 方法會使用最后一個獲取的選定標簽頁來更新內容。