[原創]FineUI秘密花園（二十五） — 手風琴控件概述

手風琴控件是一個用來展示多個面板的控件，這些面板同時只能展開一項（也可以一項都不展開），和選項卡控件TabStrip有異曲同工之妙。本章將會介紹手風琴控件的基本用法，並結合樹控件來制作站點菜單。

 

手風琴控件的基本用法

通過一個示例來展示手風琴控件的用法，先看下最終效果圖：

 

這個手風琴控件由三個面板組成，來看下ASPX標簽定義：

<ext:Accordion ID="Accordion1" Title="手風琴控件" runat="server" Width="300px" Height="450px"
    EnableFill="true" ShowBorder="True" ActiveIndex="1">
    <Panes>
        <ext:AccordionPane ID="AccordionPane1" runat="server" Title="面板一" IconUrl="../images/16/1.png"
            BodyPadding="2px 5px" ShowBorder="false">
            <Items>
                <ext:Label ID="Label1" Text="面板一中的文本" runat="server">
                </ext:Label>
            </Items>
        </ext:AccordionPane>
        // 省略其他面板...
    </Panes>
</ext:Accordion>

這里有幾個屬性需要注意：

• EnableFill：子面板是否填充全部空間，否則的所有子面板會堆積在頂部
• ActiveIndex：默認選中的面板索引

而子面板（AccordionPane）和普通的Panel面板沒有區別，只不過ShowHeader屬性不可用（子面板的標題欄是一定會存在的）。

 

在來看下后台獲取展開面板的代碼：

protected void Button1_Click(object sender, EventArgs e)
{
    Alert.ShowInTop(String.Format("當前展開的是第 {0} 個面板", Accordion1.ActiveIndex + 1));
}

 

手風琴+樹控件

官方示例的左側菜單使用的是樹控件，如下圖所示：

 

其前台標簽定義和后台綁定代碼如下所示：

<ext:Region ID="Region2" Split="true" EnableSplitTip="true" CollapseMode="Mini" Width="200px"
    Margins="0 0 0 0" ShowHeader="true" Title="示例" EnableLargeHeader="false" Icon="Outline"
    EnableCollapse="true" Layout="Fit" Position="Left" runat="server">
</ext:Region>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/menu.xml"></asp:XmlDataSource>

 

protected void Page_Init(object sender, EventArgs e)
{
    InitTreeMenu();
}

private void InitTreeMenu()
{
    Tree treeMenu = new Tree();
    treeMenu.ID = "treeMenu";
    treeMenu.EnableArrows = true;
    treeMenu.ShowBorder = false;
    treeMenu.ShowHeader = false;
    treeMenu.EnableIcons = false;
    treeMenu.AutoScroll = true;
    Region2.Items.Add(treeMenu);

    // 綁定 XML 數據源到樹控件
    treeMenu.DataSource = XmlDataSource1;
    treeMenu.DataBind();
}

這里涉及的知識點有：

1. 動態添加樹控件，在Page_Init中進行；
2. 將樹控件綁定到XML數據源。

 

簡單看下XML文件的內容：

<?xml version="1.0" encoding="utf-8" ?>
<Tree>
  <TreeNode Text="配置信息" SingleClickExpand="true">
    <TreeNode Text="發布歷史" NavigateUrl="~/config/release_history.txt">
    </TreeNode>
    <TreeNode Text="版本發布周期" NavigateUrl="~/config/release_time_chart.htm" >
    </TreeNode>
    <TreeNode Text="配置 Web.config" NavigateUrl="~/config/modify_webconfig.htm" >
    </TreeNode>
    <TreeNode Text="內置圖標" NavigateUrl="~/config/icons.htm" >
    </TreeNode>
    <TreeNode Text="安裝工具箱" NavigateUrl="~/config/install_toolbox.htm" >
    </TreeNode>
    <TreeNode Text="IIS6中啟用GZIP壓縮" NavigateUrl="~/config/enable_gzip_iis6.htm" >
    </TreeNode>
    <TreeNode Text="AJAX 屬性列表" NavigateUrl="~/config/ajax.aspx" >
    </TreeNode>
  </TreeNode>
  // 省略其他節點...
</Tree>

 

后來很多網友希望增加手風琴控件和樹控件的組合菜單，效果如下所示：

 

下面看下具體的實現代碼：

protected void Page_Init(object sender, EventArgs e)
{
    InitAccordionMenu();
}

private Accordion InitAccordionMenu()
{
    Accordion accordionMenu = new Accordion();
    accordionMenu.ID = "accordionMenu";
    accordionMenu.EnableFill = true;
    accordionMenu.ShowBorder = false;
    accordionMenu.ShowHeader = false;
    Region2.Items.Add(accordionMenu);

    XmlDocument xmlDoc = XmlDataSource1.GetXmlDocument();
    XmlNodeList xmlNodes = xmlDoc.SelectNodes("/Tree/TreeNode");
    foreach (XmlNode xmlNode in xmlNodes)
    {
        if (xmlNode.HasChildNodes)
        {
            AccordionPane accordionPane = new AccordionPane();
            accordionPane.Title = xmlNode.Attributes["Text"].Value;
            accordionPane.Layout = Layout.Fit;
            accordionPane.ShowBorder = false;
            accordionPane.BodyPadding = "2px 0 0 0";
            accordionMenu.Items.Add(accordionPane);

            Tree innerTree = new Tree();
            innerTree.EnableArrows = true;
            innerTree.ShowBorder = false;
            innerTree.ShowHeader = false;
            innerTree.EnableIcons = false;
            innerTree.AutoScroll = true;
            accordionPane.Items.Add(innerTree);

            XmlDocument innerXmlDoc = new XmlDocument();
            innerXmlDoc.LoadXml(String.Format("<?xml version=\"1.0\" encoding=\"utf-8\" ?><Tree>{0}</Tree>", xmlNode.InnerXml));

            // 綁定AccordionPane內部的樹控件
            innerTree.DataSource = innerXmlDoc;
            innerTree.DataBind();
        }
    }
}

來分析一下這段代碼的邏輯：

1. 首先創建一個手風琴控件，並添加到父容器中（Region2.Items.Add）；
2. 從Xml數據源獲取XmlDocument對象；
3. 選取XmlDocument對象中第一層TreeNode節點集合（其XPath路徑為/Tree/TreeNode）；
4. 遍歷第一層TreeNode節點集合，並生成手風琴控件的子面板（new AccordionPane），注意這些子面板的Layout屬性為Fit；
5. 向手風琴子面板中加入新創建的樹控件（accordionPane.Items.Add）；
6. 讀取當前Xml節點的內部標簽（xmlNode.InnerXml），並創建新的XmlDocument對象並綁定到樹控件上。

 

通過上面的幾個步驟，我們創建了一個手風琴控件，每個手風琴控件子面板中創建了一個樹控件，從而完成這個任務。

 

小結

本章我們講解了手風琴控件的基本用法，以及如何結合手風琴和樹控件來創建站點菜單。下一篇文章我們會介紹和手風琴控件比較類似的選項卡控件。

 

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