更新时间：2023-11-17 17:40:21
你们好，最近小艾特发现有诸多的小伙伴们对于easyUI项目如何启动运行，easyui这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。
1、Nested Tabs（嵌套选项卡），The tab panel can contain sub tabs or other components（该选项可可以包含子选项或者其他组件）.
2、<!DOCTYPE html>
3、<html>
4、<head>
5、 <meta charset="UTF-8">
6、 <title>Nested Tabs - jQuery EasyUI Demo</title>
7、 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
8、 <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
9、 <link rel="stylesheet" type="text/css" href="../demo.css">
10、 <script type="text/javascript" src="../../jquery.min.js"></script>
11、 <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
12、</head>
13、<body>
14、 <h2>Nested Tabs</h2>
15、 <p>The tab panel can contain sub tabs or other components.</p>
16、 <div style="margin:20px 0;"></div>
17、 <div class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px">
18、 <div title="Sub Tabs" style="padding:10px;">
19、 <div class="easyui-tabs" data-options="fit:true,plain:true">
20、 <div title="Title1" style="padding:10px;">Content 1</div>
21、 <div title="Title2" style="padding:10px;">Content 2</div>
22、 <div title="Title3" style="padding:10px;">Content 3</div>
23、 </div>
24、 </div>
25、 <div title="Ajax" data-options="href:'_content.html',closable:true" style="padding:10px"></div>
26、 <div title="Iframe" data-options="closable:true" style="overflow:hidden">
27、 <iframe scrolling="yes" frameborder="胆昆0" src="http://www.jeasyui.com/forum/index.php" style="width:100%;height:100%;"></iframe>
28、 </div>
29、 <div title="DataGrid" data-options="closable:true" style="padding:10px">
30、 <table class="easyui-datagrid" data-options="fit:true,singleSelect:true,rownumbers:true">
31、 <thead>
32、 <tr>
33、 泉陵况 <th data-options="field:'f1',width:100">Title1</th>
34、 <th data-options="field:'f2',width:100">Title2</th>
35、 <th data-options="field:'f3',width:100">Title3</th>
36、 </tr>
37、 </thead>
38、 <tbody>
39、 <tr>
40、 <td>d11</td>
41、 <td>d12</td>
42、 <td>d13</td>
43、 </tr>
44、 <tr>
45、 块川 <td>d21</td>
46、 <td>d22</td>
47、 <td>d23</td>
48、 </tr>
49、 </tbody>
50、 </table>
51、 </div>
52、 </div>
53、</body>
54、</html>
55、Nested Tabs（嵌套选项卡），运行效果如图所示。
56、Tabs Strip Tools（选项卡工具条），Click the mini-buttons on the tab strip to perform actions.
57、<!DOCTYPE html>
58、<html>
59、<head>
60、 <meta charset="UTF-8">
61、 <title>Tabs Strip Tools - jQuery EasyUI Demo</title>
62、 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
63、 <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
64、 <link rel="stylesheet" type="text/css" href="../demo.css">
65、 <script type="text/javascript" src="../../jquery.min.js"></script>
66、 <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
67、</head>
68、<body>
69、 <h2>Tabs Strip Tools</h2>
70、 <p>Click the mini-buttons on the tab strip to perform actions.</p>
71、 <div style="margin:20px 0;"></div>
72、 <div class="easyui-tabs" style="width:700px;height:250px">
73、 <div title="About" data-options="tools:'#p-tools'" style="padding:10px">
74、 <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
75、 <ul>
76、 <li>easyui is a collection of user-interface plugin based on jQuery.</li>
77、 <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
78、 <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
79、 <li>complete framework for HTML5 web page.</li>
80、 <li>easyui save your time and scales while developing your products.</li>
81、 <li>easyui is very easy but powerful.</li>
82、 </ul>
83、 </div>
84、 <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
85、 This is the help content.
86、 </div>
87、 </div>
88、 <div id="p-tools">
89、 <a href="javascript：void(0)" class="icon-mini-add" onclick="alert('add')"></a>
90、 <a href="javascript：void(0)" class="icon-mini-edit" onclick="alert('edit')"></a>
91、 <a href="javascript：void(0)" class="icon-mini-refresh" onclick="alert('refresh')"></a>
92、 </div>
93、</body>
94、</html>
95、Tabs Strip Tools（选项卡工具条），运行效果如图所示。
96、Tabs Tools（选项卡工具组），Click the buttons on the top right of tabs header to add or remove tab panel.
97、<!DOCTYPE html>
98、<html>
99、<head>
100、 <meta charset="UTF-8">
101、 <title>Tabs Tools - jQuery EasyUI Demo</title>
102、 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
103、 <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
104、 <link rel="stylesheet" type="text/css" href="../demo.css">
105、 <script type="text/javascript" src="../../jquery.min.js"></script>
106、 <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
107、</head>
108、<body>
109、 <h2>Tabs Tools</h2>
110、 <p>Click the buttons on the top right of tabs header to add or remove tab panel.</p>
111、 <div style="margin:20px 0;"></div>
112、 <div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px">
113、 </div>
114、 <div id="tab-tools">
115、 <a href="javascript：void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a>
116、 <a href="javascript：void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a>
117、 </div>
118、 <script type="text/javascript">
119、 var index = 0;
120、 function addPanel(){
121、 index++;
122、 $('#tt').tabs('add',{
123、 title: 'Tab'+index,
124、 content: '<div style="padding:10px">Content'+index+'</div>',
125、 closable: true
126、 });
127、 }
128、 function removePanel(){
129、 var tab = $('#tt').tabs('getSelected');
130、 if (tab){
131、 var index = $('#tt').tabs('getTabIndex', tab);
132、 $('#tt').tabs('close', index);
133、 }
134、 }
135、 </script>
136、</body>
137、</html>
138、Tabs Tools（选项卡工具组），运行效果如下图所示。
以上就是easyui这篇文章的一些介绍，希望对大家有所帮助。
