4.2.太極平臺：使用模塊功能，製作tab多標籤頁面

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="#"
                       onclick="loadUrl('panel-body', 'taijiWidget.do?widgetId=35&action=edit&dataId=${Request:dataId}');"> 基本信息</a></li>
                <li><a class="nav-link" data-toggle="tab" href="#"
                       onclick="loadUrl('panel-body', 'taijiWidget.do?widgetId=55&OrderId=${Request:dataId}');">成本支出</a></li>
                <li><a class="nav-link" data-toggle="tab" href="#"
                       onclick="loadUrl('panel-body', 'taijiWidget.do?widgetId=43&OrderId=${Request:dataId}');">收款記錄</a></li>
                <li><a class="nav-link" data-toggle="tab" href="#"
                       onclick="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="#"
                       onclick="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="#"
                       onclick="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="#"
                       onclick="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="#"
                       onclick="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標籤頁效果。進行各個區域的數據加載。