1、简单tab标签页
我们经常会遇到使用tab标签制作多页面，如下面的布局。具体效果，可参见样例系统的订单详情。
使用奇点太极框架，如何制作呢？我们需要用到模块功能。
在项目管理页面，点击左边导航“模块管理”。如下图所示。
添加1个新模块：订单详情，如下图所示。
填入代码如下。具体的实现思路：创建tab标签页的布局，点击tab标签时，通过ajax去加载页面，然后填充到div区域即可。
提示：CSDN的代码编辑器有bug，会将HTML代码中的onclick方法改名为οnclick，看得出这2个的区别吗？看不出来吧，我也看不出来，但是这2个onclick里面的第1个o就是不一样。所以下面的代码复制到编辑器后，再手动的把复制的οnclick替换为onclick。编辑器的搜索功能，是能够认得出来这2个不一样的。而且IDE工具也能识别不正确的onclick。不相信的话，你就在当前的网页上，按CTRL+F，搜索onclick试试看，看这2个onclick不一样吧。
<div class="row m-b-lg">
<div class="col-lg-12">
<div class="tabs-container">
<ul class="nav nav-tabs" role="tablist">
<!--通过tab标签的onclick方法，调用loadUrl，填充到panel-body区域-->
<li><a class="nav-link active" data-toggle="tab" href="#"
οnclick="loadUrl('panel-body', 'taijiWidget.do?widgetId=35&action=edit&dataId=${Request:dataId}');"> 基本信息</a></li>
<li><a class="nav-link" data-toggle="tab" href="#"
οnclick="loadUrl('panel-body', 'taijiWidget.do?widgetId=55&OrderId=${Request:dataId}');">成本支出</a></li>
<li><a class="nav-link" data-toggle="tab" href="#"
οnclick="loadUrl('panel-body', 'taijiWidget.do?widgetId=43&OrderId=${Request:dataId}');">收款记录</a></li>
<li><a class="nav-link" data-toggle="tab" href="#"
οnclick="loadUrl('panel-body', 'taijiWidget.do?widgetId=55&OrderId=${Request:dataId}');">开票记录</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active">
<!--此处的panel-body指定了id属性-->
<div class="panel-body" id="panel-body">
</div>
</div>
</div>
</div>
</div>
</div>
<script>
//初始化时，需要加载第一个tab内容
loadUrl("panel-body", "taijiWidget.do?widgetId=35&action=edit&dataId=${Request:dataId}");
</script>
在loadUrl的链接中，我们使用了${Request:dataId}，这是一个太极框架中定义的标签。关于标签的使用，请参阅模块的标签章节。此处使用的标签，用于从订单列表中传递订单id过去。
2、tab标签页的复杂布局
如果在tab标签的内部页面中，还有上下布局（如下图所示），或者左右布局。则有2种方式实现。
第一，将复杂布局的内页，再创建为1个模块。点击tab标签时，loadUrl调用模块的链接。通过模块来加载复杂布局页面。
第二，在点击tab标签时，同时加载多个div的区域。
我们就第二种方法，做一个示例。因为第一种方法，就是创建模块，方法类似，不做累述。
模块的代码，调整有2个地方：
1、tab标签点击时，会调用2个loadUrl，分别用于填充页面中2个div区域。
2、tab-content内容区域，在panel-body区域中，加入了2个div，分别作为填充加载。
如果我们要把div的内容清空，则在调用loadUrl时，第2个参数传入空即可。如下面的样例，第1个标签页只有详情，没有列表；第2个和第3个标签页，有详情，有列表；第4个标签页，没有详情，只有列表；
<div class="row m-b-lg">
<div class="col-lg-12">
<div class="tabs-container">
<ul class="nav nav-tabs" role="tablist">
<!--此时的onclick方法，加载了2个loadUrl，分别填充到panel-body的2个div区域-->
<li><a class="nav-link active" data-toggle="tab" href="#"
οnclick="loadUrl('tab-body-form', 'taijiWidget.do?widgetId=35&action=edit&dataId=${Request:dataId}');
loadUrl('tab-body-list', '');">基本信息</a></li>
<li><a class="nav-link" data-toggle="tab" href="#"
οnclick="loadUrl('tab-body-form', 'taijiWidget.do?widgetId=56&action=view&dataId=${Request:dataId}');
loadUrl('tab-body-list', 'taijiWidget.do?widgetId=55&OrderId=${Request:dataId}');">成本支出</a></li>
<li><a class="nav-link" data-toggle="tab" href="#"
οnclick="loadUrl('tab-body-form', 'taijiWidget.do?widgetId=44&action=view&dataId=${Request:dataId}');
loadUrl('tab-body-list', 'taijiWidget.do?widgetId=43&OrderId=${Request:dataId}');">收款记录</a></li>
<li><a class="nav-link" data-toggle="tab" href="#"
οnclick="loadUrl('tab-body-form', '');
loadUrl('tab-body-list', 'taijiWidget.do?widgetId=55&OrderId=${Request:dataId}');">开票记录</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active">
<div class="panel-body">
<!--这里添加了2个div-->
<div id="tab-body-form"></div>
<div id="tab-body-list"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
//初始化时，需要加载第一个tab内容
loadUrl("tab-body-form", "taijiWidget.do?widgetId=35&action=edit&dataId=${Request:dataId}");
</script>至此，我们通过模块的方式，可以创建复杂的tab标签页效果。进行各个区域的数据加载。
