Microsoft AjaxToolkits之8. Accordion 控件
Accordion控件一般用在内容比较多的页面上，功能类似于TAB选项卡，将一组功能相似任务相同的内容放在不同的选项卡下。然后通过选项卡的Header实现各组内容查看。
属性列表：
SelectedIndex：已伸展开的AccordionPane控件的索引号。
HeaderCssClass：作用于标题的CSS类名。它也可以指定给Accordion
控件的HeaderCssClass属性以此作为所有AccordionPanes控件的默认属性，或者直接指定给单独AccordionPane控件的HeaderCssClass属性。
ContentCssClass：用于显示内容的CSS类名。它也可以指定给Accordion
控件的ContentCssClass属性以此作为所有AccordionPanes控件的默认属性，或者直接指定给单独AccordionPane控件的ContentCssClass属性。
AutoSize:
设计控件中Panel的显示方式，主要有3种，即None（无限制的拉伸和收缩）,Limit（限制内容的高度）,Fill（内容高度与控件本身高度一样）。
FadeTransitions：为True时为渐变效果（在伸缩时颜色变淡，伸缩完后颜色恢复正常）,为false时是标准变换。
TransitionDuration：在选择某一标题后伸展和收缩过渡动画所持续的时间,单位为毫秒。
FramesPerSecond：用于伸展和收缩过渡动画每秒所需要的帧数。
AutoSize：用于限制Accordion控件展开的高度. AutoSize枚举类型取值在简介中已作过描述。
Panes：AccordionPane控件的集合。
HeaderTemplate：标题模版，其中包含的标记用于进行数据绑定来显示面版标题。
ContentTemplate：内容模版，其中包含的标记用于进行数据绑来显示面版内容。
DataSource：指定数据源，必须要调用DataBind()方法进行数据绑定。
DataSourceID：用数据源的ID来指定一个数据源。
DataMember：当使用DataSourceID 来指定数据源时用于绑定的成员。
实例解析一、实现静态导航菜单的实例（并页面无刷新）
核心技术：
界面无刷新
OnItemCommand="Accordion1_ItemCommand"
1.前台UI
<head
runat="server">
<title>无标题页</title>
<style>
.header
{
background-color:gray;
height:25px;
widht:205px;
border-right:#99ccff thin solid;
border-top:#9ccff thin solid;
border-left:#9ccff thin solid;
border-botton:#9ccff thin solid;
}
.content
{
background-color:#ccccff;
height:30px;
width:205px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server"></asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lab" runat="server" Text=""></asp:Label>
<cc1:Accordion ID="Accordion1" runat="server" ContentCssClass="content"
HeaderCssClass="header" AutoSize="None" Width="300px" Height="150px"
OnItemCommand="Accordion1_ItemCommand">
<Panes>
<cc1:AccordionPane ID="AccordionPane1" runat="server">
<Header><a href="">属性介绍一</a></Header>
<Content>
HeaderCssClass：作用于标题的CSS类名。它也可以指定给Accordion
控件的HeaderCssClass属性以此作为所有AccordionPanes控件的默认属性，或者直接指定给单独AccordionPane控件的HeaderCssClass属性。
</Content>
</cc1:AccordionPane>
</Panes>
<Panes>
<cc1:AccordionPane ID="AccordionPane2" runat="server">
<Header><a href="">属性介绍二</a></Header>
<Content>
DataMember：当使用DataSourceID 来指定数据源时用于绑定的成员。<br />
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="link"
CommandArgument="单击外部获得此数据">单击外部获得此数据</asp:LinkButton>
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
2.后台
protected void Accordion1_ItemCommand(object sender, CommandEventArgs e)
{
lab.Text = e.CommandArgument.ToString();
}
实例解析二、实现动态导航菜单的实例（并页面无刷新）
核心技术：
界面无刷新
OnItemCommand="Accordion1_ItemCommand"
SqlDataSource
<form
id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lab" runat="server" Text=""></asp:Label>
<cc1:Accordion ID="Accordion1" runat="server" ContentCssClass="content"
HeaderCssClass="header" AutoSize="None" Width="300px" Height="150px"
OnItemCommand="Accordion1_ItemCommand" DataSourceID="SqlDataSource1">
<HeaderTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" Text='<%#
Bind("UserName")%>'></asp:LinkButton>
</HeaderTemplate>
<ContentTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" Text='<%#
Bind("UserAddress")%>'></asp:LinkButton>
</ContentTemplate>
</cc1:Accordion>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:db_04ConnectionString %>"
SelectCommand="SELECT [UserName], [UserAddress], [UserID] FROM
[tb_Employee]"></asp:SqlDataSource>
</form>
实例解析二、动态添加导航菜单项的实例
核心技术：
AccordionPane pane = new AccordionPane();
....
pane.HeaderContainer.Controls.Add(LinkButton..);
pane.ContentContainer.Controls.Add(...);
....
Accordion1.Panes.Add(pane);
