1、Nested Tabs（嵌套选项卡），The tab panel can contain sub tabs or other components（该选项可可以包含子选项或者其他组件）.<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Nested Tabs - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script></head><body> <h2>Nested Tabs</h2> <p>The tab panel can contain sub tabs or other components.</p> <div style="margin:20px 0;"></div> <div class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px"> <div title="Sub Tabs" style="padding:10px;"> <div class="easyui-tabs" data-options="fit:true,plain:true"> <div title="Title1" style="padding:10px;">Content 1</div> <div title="Title2" style="padding:10px;">Content 2</div> <div title="Title3" style="padding:10px;">Content 3</div> </div> </div> <div title="Ajax" data-options="href:'_content.html',closable:true" style="padding:10px"></div> <div title="Iframe" data-options="closable:true" style="overflow:hidden"> <iframe scrolling="yes" frameborder="0" src="http://www.jeasyui.com/forum/index.php" style="width:100%;height:100%;"></iframe> </div> <div title="DataGrid" data-options="closable:true" style="padding:10px"> <table class="easyui-datagrid" data-options="fit:true,singleSelect:true,rownumbers:true"> <thead> <tr> <th data-options="field:'f1',width:100">Title1</th> <th data-options="field:'f2',width:100">Title2</th> <th data-options="field:'f3',width:100">Title3</th> </tr> </thead> <tbody> <tr> <td>d11</td> <td>d12</td> <td>d13</td> </tr> <tr> <td>d21</td> <td>d22</td> <td>d23</td> </tr> </tbody> </table> </div> </div></body></html>
2、Nested Tabs（嵌套选项卡），运行效果如图所示。
3、Tabs Strip Tools（选项卡工具条），Click the mini-buttons on the tab strip to perform actions.<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Tabs Strip Tools - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script></head><body> <h2>Tabs Strip Tools</h2> <p>Click the mini-buttons on the tab strip to perform actions.</p> <div style="margin:20px 0;"></div> <div class="easyui-tabs" style="width:700px;height:250px"> <div title="About" data-options="tools:'#p-tools'" style="padding:10px"> <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p> <ul> <li>easyui is a collection of user-interface plugin based on jQuery.</li> <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li> <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li> <li>complete framework for HTML5 web page.</li> <li>easyui save your time and scales while developing your products.</li> <li>easyui is very easy but powerful.</li> </ul> </div> <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px"> This is the help content. </div> </div> <div id="p-tools"> <a href="javascript:void(0)" class="icon-mini-add" onclick="alert('add')"></a> <a href="javascript:void(0)" class="icon-mini-edit" onclick="alert('edit')"></a> <a href="javascript:void(0)" class="icon-mini-refresh" onclick="alert('refresh')"></a> </div></body></html>
4、Tabs Strip Tools（选项卡工具条），运行效果如图所示。
5、Tabs Tools（选项卡工具组），Click the buttons on the top right of tabs header to add or remove tab panel.<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Tabs Tools - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script></head><body> <h2>Tabs Tools</h2> <p>Click the buttons on the top right of tabs header to add or remove tab panel.</p> <div style="margin:20px 0;"></div> <div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px"> </div> <div id="tab-tools"> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a> </div> <script type="text/javascript"> var index = 0; function addPanel(){ index++; $('#tt').tabs('add',{ title: 'Tab'+index, content: '<div style="padding:10px">Content'+index+'</div>', closable: true }); } function removePanel(){ var tab = $('#tt').tabs('getSelected'); if (tab){ var index = $('#tt').tabs('getTabIndex', tab); $('#tt').tabs('close', index); } } </script></body></html>
6、Tabs Tools（选项卡工具组），运行效果如下图所示。
