EasyUI Tabs控制項詳解

一、EasyUI Tabs控制項介紹

EasyUI Tabs控制項是一種基於jQuery的UI插件，它提供了多個Tab頁並且支持AJAX非同步載入內容的功能，同時還支持通過選項卡切換時觸發事件等特性，解決了傳統的一屏多功能點的布局上限問題。

EasyUI Tabs控制項是目前使用頻率較高的一種標籤頁插件，它的優點在於使用簡單、功能強大，而且還可以與EasyUI的其他插件完美融合，使得Web開發變得更加高效。

二、EasyUI Tabs控制項使用

1. 載入EasyUI庫文件

<!-- 載入jQuery庫文件 -->
<script type="text/javascript" src="jquery.min.js"></script>
<!-- 載入EasyUI庫文件 -->
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery.easyui.min.js"></script>

2. Tabs控制項的基本結構

<div id="tt" class="easyui-tabs" style="width:700px;height:250px;">
    <div title="Tab1" style="padding:10px;">
        Tab1 Content
    </div>
    <div title="Tab2" style="padding:10px;">
        Tab2 Content
    </div>
    <div title="Tab3" data-options="closable:true" style="padding:10px;">
        Tab3 Content
    </div>
</div>

以上代碼定義了一個ID為”tt”的Tabs控制項，裡面包含了三個title屬性分別為Tab1、Tab2、Tab3的<div>元素，其中Tab3還定義了closable屬性，允許該選項卡關閉。

3. Tabs控制項的屬性

EasyUI Tabs控制項提供了多個屬性供我們設置，下面介紹幾個常用的屬性：

1) fit屬性

控制項是否自適應父容器大小，默認值為false。

<div id="tt" class="easyui-tabs" style="width:100%;height:100%;" data-options="fit:true">

2) border屬性

是否繪製控制項邊框，默認值為false。

<div id="tt" class="easyui-tabs" style="width:700px;height:250px;" data-options="border:true">

3) onSelect事件

選項卡切換時觸發的事件。

<div id="tt" class="easyui-tabs" style="width:700px;height:250px;"
    data-options="onSelect:function(title,index){alert(title);}"></div>

4. Tabs控制項的方法

EasyUI Tabs控制項還提供了多個方法供我們調用，下面介紹幾個常用的方法：

1) addTab方法

添加新的選項卡。

$("#tt").tabs("add", {
    title: "New Tab",
    href: "newtab.html",
    closable: true
});

2) select方法

選中指定的選項卡。

$("#tt").tabs("select", "Tab2");

3) close方法

關閉指定的選項卡。

$("#tt").tabs("close", "Tab3");

三、EasyUI Tabs控制項示例

1. 基本示例

下面是一個簡單的EasyUI Tabs控制項示例，包含三個選項卡，其中第三個選項卡允許關閉。

<div id="tt" class="easyui-tabs" style="width:700px;height:250px;">
    <div title="Tab1" style="padding:10px;">
        This is Tab1
    </div>
    <div title="Tab2" style="padding:10px;">
        This is Tab2
    </div>
    <div title="Tab3" data-options="closable:true" style="padding:10px;">
        This is Tab3
    </div>
</div>

2. AJAX示例

下面是一個使用AJAX非同步載入選項卡內容的示例。

<div id="tt" class="easyui-tabs" style="width:700px;height:250px;">
    <div title="Tab1" style="padding:10px;">
        This is Tab1
    </div>
    <div title="Tab2" style="padding:10px;">
        This is Tab2
    </div>
    <div title="Tab3" data-options="closable:true" href="tab3.html"></div>
</div>

其中tab3.html是一個單獨的HTML文件，該文件中只包含選項卡內容的構建，例如：

<p>This is Tab3</p>

3. 動態添加選項卡示例

下面是一個動態添加選項卡的示例。

<div id="tt" class="easyui-tabs" style="width:700px;height:250px;">
    <div title="Tab1" style="padding:10px;">
        This is Tab1
    </div>
    <div title="Tab2" style="padding:10px;">
        This is Tab2
    </div>
</div>

<script>
$("#tt").tabs("add", {
    title: "New Tab",
    href: "newtab.html", // 可以是URL，也可以是HTML字元串
    closable: true
});
</script>

點擊「添加選項卡」按鈕即可動態添加選項卡。

4. 選項卡切換事件示例

下面是一個選項卡切換事件的示例。

<div id="tt" class="easyui-tabs" style="width:700px;height:250px;"
    data-options="onSelect:function(title,index){alert('您當前切換到了「'+title+'」選項卡。');}">
    <div title="Tab1" style="padding:10px;">
        This is Tab1
    </div>
    <div title="Tab2" style="padding:10px;">
        This is Tab2
    </div>
    <div title="Tab3" data-options="closable:true" style="padding:10px;">
        This is Tab3
    </div>
</div>

切換選項卡時將會彈出提示框，顯示當前切換到了哪個選項卡。

四、總結

EasyUI Tabs控制項是一種非常實用的UI插件，它可以讓開發人員輕鬆構建出漂亮、功能強大的選項卡界面，同時還提供了多種靈活的設置和擴展方式，讓我們的開發變得更加高效。