[原創]FineUI秘密花園（二十六） — 選項卡控件概述

選項卡的使用非常廣泛，比如官方示例的站點框架，TabStrip被用來同時打開多個頁面，並方便地在頁面之間進行快速切換。TabStrip還進行需要和JavaScript進行交互，比如動態的打開關閉選項卡，FineUI也為此提供了一些便利方法。

 

選項卡控件的基本用法

一個TabStrip由很多選項卡（Tab）組成，典型的標簽定義如下：

<ext:TabStrip ID="TabStrip1" Width="750px" Height="300px" ShowBorder="true" ActiveTabIndex="1"
        runat="server">
    <Tabs>
        <ext:Tab Title="標簽一" EnableBackgroundColor="true" BodyPadding="5px" Layout="Fit"
            runat="server">
            <Items>
            </Items>
        </ext:Tab>
        <ext:Tab Title="<span class='highlight'>標簽二（高亮）</span>" BodyPadding="5px"
            EnableBackgroundColor="true" runat="server">
            <Items>
            </Items>
        </ext:Tab>
        <ext:Tab Title="標簽三" BodyPadding="5px" EnableBackgroundColor="true" runat="server">
            <Items>
                <ext:Label ID="Label3" CssClass="highlight" Text="第三個標簽的內容（已經應用了高亮樣式）" runat="server" />
            </Items>
        </ext:Tab>
    </Tabs>
</ext:TabStrip>

 

其實 ext:Tab 控件是從Panel控件繼承下來的，因此擁有Panel控件的屬性，比如這里看到的EnableBackgroudColor、BodyPadding，還可以為其內部元素應用布局。

還需要注意，第二個Tab的Title屬性包含了HTML代碼，因此我們可以為Title應用任意樣式：

<style type="text/css">
    .highlight
    {
        font-weight: bold;
        color: red;
    }
</style>

頁面顯示效果：

TabStrip還有其他一些重要的屬性：

• AutoPostBack：是否自動回發（切換Tab）
• EnableTitleBackgroundColor：顯示標題的背景顏色
  • 下面是不顯示標題背景色的顯示效果
  • 
• EnableTabCloseMenu：是否啟用右鍵菜單 - 可用來關閉當前Tab和所有其他Tab
  • 這個屬性需要配合每個Tab的EnableClose屬性同時使用
  • 
• TabPosition：選項卡顯示的位置
  • 位於頂部（默認值）或者底部，下面是選項卡標簽位於底部的顯示效果
  • 
• ActiveTabIndex：當前激活選項卡的索引（可以使用此屬性切換當前選中的選項卡）
  • 比如要實現點擊按鈕，不斷地循環切換激活選項卡的功能

    protected void Button3_Click(object sender, EventArgs e)
    {
        int nextIndex = TabStrip1.ActiveTabIndex + 1;
    
        if (nextIndex >= TabStrip1.Tabs.Count)
        {
            nextIndex = 0;
        }
    
        TabStrip1.ActiveTabIndex = nextIndex;
    }

• EnableDeferredRender：是否啟用延遲加載選項卡（默認不延遲加載，雖然可以提供性能，但是有時會出錯）

 

自動回發選項卡標簽

有時我們需要在用戶切換選項卡時初始化選項卡的內容，因為用戶沒看到的東西可以先不加載，那么該怎么實現呢？

其實很簡單，只需要啟用TabStrip的AutoPostBack屬性和定義回發處理函數即可，來看下具體實現：

<ext:TabStrip ID="TabStrip1" Width="750px" Height="300px"
    AutoPostBack="true" OnTabIndexChanged="TabStrip1_TabIndexChanged"
    ShowBorder="true" ActiveTabIndex="1" runat="server">
    // 省略內部標簽...
</ext:TabStrip>

后台處理函數只需要根據當前激活的選項卡標簽進行處理即可：

protected void TabStrip1_TabIndexChanged(object sender, EventArgs e)
{
    if (TabStrip1.ActiveTabIndex == 0)
    {
        Label1.Text = "標簽回發時間：" + DateTime.Now.ToLongTimeString();
    }
    else if (TabStrip1.ActiveTabIndex == 1)
    {
        Label2.Text = "標簽回發時間：" + DateTime.Now.ToLongTimeString();
    }
    else if (TabStrip1.ActiveTabIndex == 2)
    {
        Label3.Text = "標簽回發時間：" + DateTime.Now.ToLongTimeString();
    }
}

顯示效果：

 

內嵌IFrame與IFrame的延遲加載

TabStrip的最常用法是內嵌IFrame頁面，從而將大的邏輯塊分割成小的邏輯塊，在某種程度上這種做法比母版頁的效果更好。

下面來看下內嵌IFrame頁面的基本用法：

<ext:TabStrip ID="TabStrip1" Width="750px" Height="450px" ShowBorder="true" ActiveTabIndex="0"
    runat="server" EnableTitleBackgroundColor="False">
    <Tabs>
        <ext:Tab ID="Tab1" BodyPadding="5px" Title="標簽一" runat="server">
            <Items>
            </Items>
        </ext:Tab>
        <ext:Tab ID="Tab2" EnableIFrame="true" BodyPadding="5px" IFrameUrl="../layout/window.aspx"
            Title="標簽二 - IFrame - 延遲加載" runat="server">
        </ext:Tab>
        <ext:Tab ID="Tab3" EnableIFrame="true" BodyPadding="5px" IFrameUrl="../layout/panel.aspx"
            Title="標簽三 - IFrame - 延遲加載" runat="server">
        </ext:Tab>
    </Tabs>
</ext:TabStrip>

只需要為內嵌IFrame的Tab設置兩個屬性即可：

• EnableIFrame：是否啟用內嵌IFrame
• IFrameUrl：內嵌IFrame的地址

其實這兩個屬性都屬於PanelBase，TabStrip不過是從父類繼承來了這兩個屬性。

還有一個相關的屬性：

• IFrameName：內嵌IFrame的名稱（可以設置超鏈接的target，這樣點擊超鏈接就會在相應的Tab中打開頁面）

 

頁面顯示效果：

 

還需要注意，雖然在ASPX標簽中設置了每個Tab的IFrameUrl，但是頁面加載時並不會加載這些頁面，而是在用戶第一次點擊相關Tab時才加載其內嵌的IFrame。

這一特性是FineUI默認提供的，我們不需要做任何設置。

 

動態添加選項卡標簽

有時我們需要在前台通過JavaScript來添加刪除選項卡標簽，FineUI考慮到了這個需求並提供了幫助函數來完成此任務。

• GetAddTabReference：獲取添加選項卡的腳本
• GetRemoveTabReference：獲取移除選項卡的腳本

我們來看下官方文檔對GetAddTabReference的描述：

 

我們可以為按鈕注冊客戶端腳本，如下所示：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        btnAddBaidu1.OnClientClick = TabStrip1.GetAddTabReference("dynamic_tab_baidu1", "http://www.baidu.com/", "Baidu1", IconHelper.GetIconUrl(Icon.Application), true);
        btnRemoveBaidu1.OnClientClick = TabStrip1.GetRemoveTabReference("dynamic_tab_baidu1");
    }
}

這種情況下需要設置按鈕的EnablePostBack為false，用來阻止點擊按鈕的回發行為。

 

另一種做法是在按鈕的回發事件中，向頁面注冊腳本，如下所示：

protected void btnAddBaidu2_Click(object sender, EventArgs e)
{
    PageContext.RegisterStartupScript(TabStrip1.GetAddTabReference("dynamic_tab_baidu2", "http://www.baidu.com/", "Baidu2", IconHelper.GetIconUrl(Icon.Application), true));
}

protected void btnRemoveBaidu2_Click(object sender, EventArgs e)
{
    PageContext.RegisterStartupScript(TabStrip1.GetRemoveTabReference("dynamic_tab_baidu2"));
}

完整的示例請參考這里。

 

小結

本章詳細講解了選項卡控件的各種用法，特別是內嵌IFrame的選項卡在實際中有着廣泛的應用。下一節將介紹窗體控件，窗體控件和內嵌IFrame的面板共同構成了FineUI引以為豪的內聯框架。

 

注：《FineUI秘密花園》系列文章由三生石上原創，博客園首發，轉載請注明出處。文章目錄 官方論壇