AJAX Control Toolkit中的Accordion扩展器编程（简介）

无论在桌面软件还是在Web软件中，折叠面板都得到广泛的应用。为此，ASP.NET Control Toolkit中也当仁不让地引入了一个叫做Accordion的扩展器控件。在本系列小文章中，我将向你介绍这个扩展器控件的使用细节，并给出相应的应用实例。

关于可折叠面板

可折叠面板有什么优点？众说纷纭。但归纳来看，不外乎两点：节约界面空间；美化程序界面。这种类型的控件在现代软件中得到广泛应用并得到广大开发人员的青睐，从大型软件桌面开发环境到各类网站程序几乎无处不在，图1展示了Windows网上邻居“属性”对话框左侧典型的可折叠面板应用。对于普通用户来说，这种界面给人以层次清晰、亲切自然的感觉。

图1 Windows网上邻居“属性”对话框左侧典型的可折叠面板应用

Accordion扩展器控件简介

典型情况下，Accordion扩展器控件应用于内容比较多的页面上，功能类似于Tab选项卡，将一组功能相似、任务相同的内容放在不同的选项卡下，然后通过选择选项卡的头部标签进而查看各组内容。Accordion的属性非常复杂，使用语法格式如例程1所示。

例程1 Accordion控件典型的使用语法格式

 ContentCssClass="accordionContent"

 HeaderCssClass="accordionHeader"

 FramesPerSecond="40"

 TransitionDuration="250"

 AutoSize="None" Width="300px" Height="150px"

 OnItemCommand="Accordion1_ItemCommand" FadeTransitions="true" HeaderSelectedCssClass="accordionHeaderSelected" SuppressHeaderPostbacks="True" BorderColor="Blue" BorderStyle="Double" BorderWidth="2px">

 <Panes>

   <ajaxToolkit:AccordionPane ID="AccordionPane1"  runat="server" ContentCssClass="" HeaderCssClass="" >

   <Header>

   <a href ="" class="accordionLink">网络任务</a>

   </Header>

   <Content>

   <asp:LinkButton ID="linkbtn1" runat="server" CommandName="link" CommandArgument="创建一个新的链接" >创建一个新的链接</asp:LinkButton><br />

   <asp:LinkButton ID="LinkButton1" runat="server" CommandName="link" CommandArgument="设置家庭或小型办公网络">设置家庭或小型办公网络</asp:LinkButton><br />

   <asp:LinkButton ID="LinkButton2" runat="server" CommandName="link" CommandArgument="更改Windows防火墙设置">更改Windows防火墙设置</asp:LinkButton><br />

</Content>

   </ajaxToolkit:AccordionPane >

    <ajaxToolkit:AccordionPane ID="AccordionPane2" ContentCssClass="" HeaderCssClass="" runat="server">

   <Header>

   <a href ="" class="accordionLink">相关主题</a>

   </Header>

   <Content>

   <asp:LinkButton ID="LinkButton8" runat="server" CommandName="link" CommandArgument="网络疑问解决程序">网络疑问解决程序</asp:LinkButton><br />

</Content>

   </ajaxToolkit:AccordionPane >

    <ajaxToolkit:AccordionPane ID="AccordionPane3" ContentCssClass="" HeaderCssClass="" runat="server">

   <Header>

   <a href ="" class="accordionLink">其它位置</a>

</Header>

   <Content>

    <asp:LinkButton ID="LinkButton9" runat="server" CommandName="link" CommandArgument="控制面板">控制面板</asp:LinkButton><br />

   <asp:LinkButton ID="LinkButton10" runat="server" CommandName="link" CommandArgument="网上邻居">网上邻居</asp:LinkButton><br />

   <asp:LinkButton ID="LinkButton11" runat="server" CommandName="link" CommandArgument="我的文档">我的文档</asp:LinkButton><br />

   <asp:LinkButton ID="LinkButton12" runat="server" CommandName="link" CommandArgument="我的电脑">我的电脑</asp:LinkButton><br />

</Content>

   </ajaxToolkit:AccordionPane >

    <ajaxToolkit:AccordionPane ID="AccordionPane4" ContentCssClass="" HeaderCssClass="" runat="server">

   <Header>

   <a href ="" class="accordionLink">详细信息</a>

</Header>

   <Content>

    <asp:LinkButton ID="LinkButton13" runat="server" CommandName="link" CommandArgument="网络连接">网络连接</asp:LinkButton><br />

   <asp:LinkButton ID="LinkButton14" runat="server" CommandName="link" CommandArgument="系统文件夹">系统文件夹</asp:LinkButton><br />

</Content>

   </ajaxToolkit:AccordionPane >

   <ajaxToolkit:AccordionPane ID="AccordionPane5" runat="server" ContentCssClass="" HeaderCssClass="">

   <Header>

   <a href ="" class="accordionLink">Hello World</a>

</Header>

   <Content>

       The Accordion always stays the exact same size as its Height property. <br />This

               will cause the content to be expanded or shrunk if it isn't the right size.

</Content>

   </ajaxToolkit:AccordionPane>

</Panes>

现在，我们以表格的形式对Accordion控件的常用属性作出解释，详见表格1。

表1Accordion控件常用属性解释

在此，AccordionPane代表了Accordion控件中的具体内容。在设计界面时，必须在AccordionPane内指明Header和Content才能正确显示菜单项内容。

与其父控件Accordion一样，AccordionPane也有两个属性，即HeaderCssClass和ContentCssClass。如果此控件没有定义这两个属性，则其样式的配置来自Accordion控件内的这两个属性，否则Accordion控件的设置对此控件无效，它使用自己定义的样式。

AccordionPane内有两个模板，即Header和Content，其中Header用来显示子面板Pane的标题，适合用户选择使用，Content模板加载的是此Pane的内容，可以是任意类型的控件。

在接下来的文章中，我们将通过一个简单的示例程序来向你展示如何把静态现成的数据绑定到Accordion扩展器控件上。