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 来指定数据源时用于绑定的成员。

 

 

  1实例解析一、实现静态导航菜单的实例（并页面无刷新）
  2核心技术：
  3界面无刷新
  4OnItemCommand="Accordion1_ItemCommand"
  5
  61.前台UI
  7<head runat="server">
  8    <title>无标题页</title>
  9    <style>
 10    .header
 11    {
 12      background-color:gray;
 13      height:25px;
 14      widht:205px;
 15      border-right:#99ccff thin solid;
 16      border-top:#9ccff thin solid;
 17      border-left:#9ccff thin solid;
 18      border-botton:#9ccff thin solid;
 19    }
 20    .content
 21    {
 22      background-color:#ccccff;
 23      height:30px;
 24      width:205px;
 25    }
 26    </style>
 27</head>
 28<body>
 29    <form id="form1" runat="server">
 30    <div>
 31        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>    
 32    </div>
 33        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 34            <ContentTemplate>
 35       <asp:Label ID="lab" runat="server" Text=""></asp:Label> 
 36        <cc1:Accordion ID="Accordion1" runat="server" ContentCssClass="content" HeaderCssClass="header" AutoSize="None" Width="300px" Height="150px" OnItemCommand="Accordion1_ItemCommand">
 37            <Panes>
 38                  <cc1:AccordionPane ID="AccordionPane1" runat="server">
 39                    <Header><a href="">属性介绍一</a></Header>
 40                    <Content>                      
 41    HeaderCssClass：作用于标题的CSS类名。它也可以指定给Accordion 控件的HeaderCssClass属性以此作为所有AccordionPanes控件的默认属性，或者直接指定给单独AccordionPane控件的HeaderCssClass属性。
 42                    </Content>
 43            </cc1:AccordionPane>
 44            </Panes>
 45            <Panes>
 46                 <cc1:AccordionPane ID="AccordionPane2" runat="server">
 47                   <Header><a href="">属性介绍二</a></Header>
 48                   <Content>
 49                   DataMember：当使用DataSourceID 来指定数据源时用于绑定的成员。<br />
 50                       <asp:LinkButton ID="LinkButton1" runat="server" CommandName="link" CommandArgument="单击外部获得此数据">单击外部获得此数据</asp:LinkButton>
 51                   </Content>
 52             </cc1:AccordionPane>
 53            </Panes>
 54        </cc1:Accordion>
 55            </ContentTemplate>
 56        </asp:UpdatePanel>
 57    </form>
 58</body>
 59
 602.后台
 61    protected void Accordion1_ItemCommand(object sender, CommandEventArgs e)
 62    {
 63        lab.Text = e.CommandArgument.ToString();
 64    }
 65
 66
 67实例解析二、实现动态导航菜单的实例（并页面无刷新）
 68核心技术：
 69界面无刷新
 70OnItemCommand="Accordion1_ItemCommand"
 71SqlDataSource 
 72
 73 <form id="form1" runat="server">
 74    <div>
 75        <asp:ScriptManager ID="ScriptManager1" runat="server">
 76        </asp:ScriptManager>
 77    
 78    </div>
 79        &nbsp;
 80        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 81            <ContentTemplate>
 82       <asp:Label ID="lab" runat="server" Text=""></asp:Label> 
 83        <cc1:Accordion ID="Accordion1" runat="server" ContentCssClass="content" HeaderCssClass="header" AutoSize="None" Width="300px" Height="150px" OnItemCommand="Accordion1_ItemCommand" DataSourceID="SqlDataSource1">
 84              <HeaderTemplate>
 85                  <asp:LinkButton ID="LinkButton1" runat="server" Text='<%# Bind("UserName")%>'></asp:LinkButton>
 86              </HeaderTemplate>
 87              <ContentTemplate>
 88              <asp:LinkButton ID="LinkButton1" runat="server" Text='<%# Bind("UserAddress")%>'></asp:LinkButton>
 89              </ContentTemplate>
 90        </cc1:Accordion>
 91            </ContentTemplate>
 92        </asp:UpdatePanel>
 93        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:db_04ConnectionString %>"
 94            SelectCommand="SELECT [UserName], [UserAddress], [UserID] FROM [tb_Employee]"></asp:SqlDataSource>
 95    </form>
 96
 97实例解析二、动态添加导航菜单项的实例
 98核心技术：
 99        AccordionPane pane = new AccordionPane();
100        .
101        pane.HeaderContainer.Controls.Add(LinkButton..);
102        pane.ContentContainer.Controls.Add();
103        .
104        Accordion1.Panes.Add(pane);
105
106
107