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

 

 

  1 实例解析一、实现静态导航菜单的实例（并页面无刷新）
  2 核心技术：
  3 界面无刷新
  4 OnItemCommand = " Accordion1_ItemCommand "
  5
  6 1 .前台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
 60 2 .后台
 61      protected   void  Accordion1_ItemCommand( object  sender, CommandEventArgs e)
 62      {
 63        lab.Text = e.CommandArgument.ToString();
 64    }
 65
 66
 67 实例解析二、实现动态导航菜单的实例（并页面无刷新）
 68 核心技术：
 69 界面无刷新
 70 OnItemCommand = " Accordion1_ItemCommand "
 71 SqlDataSource 
 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