[原创]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秘密花园》系列文章由三生石上原创，博客园首发，转载请注明出处。文章目录 官方论坛