Accordion：可折叠面板的集合

功能：
         实现了QQ、Msn好友分类的折叠效果，就像包含了多个CollapsiblePanels 。
常用属性：
      SelectedIndex ： 该控件初次加载时展开的AccordionPane面板的索引值 。
      HeaderCssClass ： 该Accordion中包含的所有AccordionPane面板的标题区域所应用的CSS Class 。
      ContentCssClass ： 该Accordion中包含的所有AccordionPane面板的内容区域所应用的CSS Class 。
      AutoSize ：   在展开具有不同高度的AccordionPane面板时，该Accordion的总高度的变化方式。
                            可选如下3个值：

                             None：该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短。

                            Limit：该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短，不过最高不
                                    会超过Accordion的Height属性设定值。若是其内容高度超过了Height属性设定值，则
                                    将自动显示滚动条。

                            Fill：该Accordion的高度将固定为Height属性的设定值，不随当前展开的不同高度
                                 的AccordionPane面板而变化。若是某个AccordionPane的内容高度超过了Height属性设定
                                值，则将自动显示滚动条。
 FadeTransitions ： 若该属性值设置为true，则在切换当前展开的AccordionPane面板时，将带有淡入淡出效果 
 TransitionDuration ： 展开/折叠一个AccordionPane面板的过程所花费的时间，单位为毫秒。
 FramesPerSecond ： 播放展开/折叠AccordionPane面板动画的每秒钟帧数 。
 DataSourceID ：     页面中某个DataSource控件的ID，用于通过数据绑定自动生成AccordionPane面板 。
 <Panes> ：     该标签内将包含一系列的<ajaxToolkit:AccordionPane>标签，即Accordion- Pane的声明，用来表
                         示 Accordion中包含的面板 。
 <HeaderTemplate> ： 在使用数据绑定功能自动生成AccordionPane面板时，该标签内将定义每个面板的标题
                                     区域中的内容模板 。
 <ContentTemplate> :     在使用数据绑定功能自动生成AccordionPane面板时，该标签内将定义每个面板的正文
                                      。区域中的内容模板
实例代码：

</ head >
   < body  onload ="focus();" >< a  href ="http://abcdwxc.cnblogs.com/"  target ="_blank" > Acoordion的实例-------王晓成的博客 
     </ a >
  
   < div  class ="description" >
     < ul >
       < li > 使用可折叠控件（Accordion）并搭配 5 个可折叠面板（AccordionPane）控件， < strong > 一次仅展开一个可折叠面板 </ strong > 。  </ li >
       < li > 当页面第一次被加载时，会自动展开 < strong > 第三个 </ strong > 可折叠面板。  </ li >
     </ ul >
   </ div >
    
   < form  id ="form1"  runat ="server" >
     < asp:ScriptManager  ID ="ScriptManager1"  runat ="server" >
     </ asp:ScriptManager >
     < div  align ="center" >
       < ajaxToolkit:Accordion  ID ="Accordion1"  
                             runat ="server"
                             width ="450px"
                             ContentCssClass ="accordionContentDef"
                             HeaderCssClass ="accordionHeaderDef"
                             RequireOpenedPane ="false"
                             SelectedIndex ="2" >
         < Panes >
           < ajaxToolkit:AccordionPane  ID ="AccordionPane1"
                                     runat ="server" >
             < Header >
               < a  href =""  onclick ="return false;" >
                Visual Basic 2005 程序开发与界面设计秘诀
               </ a >
             </ Header >
             < Content >
              完全的范例与实作导向，颠覆传统只是纸上谈兵、高谈阔论的写法。通过众多程序范例，
              务实、深度且精确地切入 Visual Basic 2005 最重要且实用的程序开发与界面设计议题。
              经过本书的洗礼，相信您能扎实掌握 Visual Basic 2005 的内涵与开发精髓，迅速站上 
              .NET Framework此一巨人的肩膀，让您的开发生命走得更长、更稳、更辉煌。
             </ Content >
           </ ajaxToolkit:AccordionPane >
           < ajaxToolkit:AccordionPane  ID ="AccordionPane2"
                                     runat ="server" >
             < Header >
               < a  href =""  onclick ="return false;" >
                Visual Basic 2005 文件 IO 与数据存取秘诀
               </ a >
             </ Header >
             < Content >
              学习不在多言，不仅实作，更要实战。本书秉持具体力行的思维，彻底提升读者功力为职志，
              贡献了 260 个以上的程序范例，针对文件输入输出与数据存取议题，深度剖析。
             </ Content >
           </ ajaxToolkit:AccordionPane >
           < ajaxToolkit:AccordionPane  ID ="AccordionPane3"
                                     runat ="server"
                                     ContentCssClass ="accordionContentCS"
                                     HeaderCssClass ="accordionHeaderCS" >
             < Header >
               < a  href =""  onclick ="return false;" >
                Visual C# 2005 程序开发与界面设计秘诀
               </ a >
             </ Header >
             < Content >
              通过众多程序范例，务实、深度且精确地切入Visual C# 2005 最重要且实用的程序开发与接口设计议题。
              经过本书的洗礼，相信您能扎实掌握 Visual C# 2005 的内涵与开发精髓，迅速站上 
              .NET Framework此一巨人的肩膀，让您的开发生命走得更长、更稳、更辉煌。
             </ Content >
           </ ajaxToolkit:AccordionPane >
           < ajaxToolkit:AccordionPane  ID ="AccordionPane4"
                                     runat ="server"
                                     ContentCssClass ="accordionContentCS"
                                     HeaderCssClass ="accordionHeaderCS" >
             < Header >
               < a  href =""  onclick ="return false;" >
                Visual C# 2005 文件 IO 与数据存取秘诀
               </ a >
             </ Header >
             < Content >
              本书秉持具体力行的思维，彻底提升读者功力为职志，贡献了 260 个以上的程序范例，
              针对文件输入输出与数据存取议题，深度剖析。希望透过无私的心得分享，与大家一起再创颠峰，
              将开发生命提升至一个全新的境界。
             </ Content >
           </ ajaxToolkit:AccordionPane >
           < ajaxToolkit:AccordionPane  ID ="AccordionPane5"
                                     runat ="server"
                                     ContentCssClass ="accordionContentSQL"
                                     HeaderCssClass ="accordionHeaderSQL" >
             < Header >
               < a  href =""  onclick ="return false;" >
                Microsoft SQL Server 2005 完全实战
               </ a >
             </ Header >
             < Content >
              使用了近 600 个指令文件（.sql）与数个Windows应用程序及类库项目，详实且深入探讨 
              SQL Server 2005 的“数据库创建”、“Transact-SQL程序设计”与 XML 等三大核心领域，
              打下不可动摇的根基。
             </ Content >
           </ ajaxToolkit:AccordionPane >
         </ Panes >
       </ ajaxToolkit:Accordion >
     </ div >
     < p  />
     < div  align ="center" >
       < table >
         < tr  align ="left" >
           < td >
            是否使用 < strong > “淡出效果” </ strong > ：
             < input  id ="FadeMode"  type ="checkbox"  onclick ="toggleFade();"  value ="false"   />
           </ td >
         </ tr >
         < tr  align ="left" >
           < td >
            设定 < strong > 「AutoSize」 </ strong > 模式：
             < select  id ="AutoSizeMode"  onchange ="changeAutoSizeMode();" >
               < option  value ="0"  selected > None </ option >
               < option  value ="1" > Fill </ option >
               < option  value ="2" > Limit </ option >
             </ select >
           </ td >
         </ tr >
       </ table >
     </ div >
   </ form >
</ body >

样式如下：

<style type="text/css">
   /**/ /* 预设的标头样式表 */
  .accordionHeaderDef
   {} {
    border: 2px solid #0B0109;
    background-color: #8B7149;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
    text-align: center;
  }

   /**/ /* 预设的内容样式表 */
  .accordionContentDef
   {} {
    border: thick ridge #FFD8D8;
    background-color: #A7D9AF;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
    text-align: left;
  }

   /**/ /* 预设的标头之超级链接样式表 */
  .accordionHeaderDef a
   {} {
    color: #FFFFCC;
    text-decoration: none;
  }

   /**/ /* 当鼠标移过预设的标头之超级链接样式表 */
  .accordionHeaderDef a:hover
   {} {
    background-color: LightSlateGray; 
    color: Yellow;
    text-decoration: underline overline;
  }
   /**/ /* C# 类的标头样式表 */
  .accordionHeaderCS
   {} {
    border: 2px solid #040D0D;
    background-color: #B4CDCD;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
    text-align: center;
  }

   /**/ /* C# 类的内容样式表 */
  .accordionContentCS
   {} {
    border: thick ridge #2FFBFB;
    background-color: #F0D8DB;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
    text-align: left;
  }

   /**/ /* C# 类的标头之超级链接样式表 */
  .accordionHeaderCS a
   {} {
    color: #0000FF;
    text-decoration: none;
  }

   /**/ /* 当鼠标移过 C# 类的标头之超级链接样式表 */
  .accordionHeaderCS a:hover
   {} {
    background-color: LightSlateGray; 
    color: Yellow;
    text-decoration: underline overline;
  }

   /**/ /* SQL 类的标头样式表 */
  .accordionHeaderSQL
   {} {
    border: 2px solid #0C0C0A;
    background-color: #9C8C5A;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
    text-align: center;
  }

   /**/ /* SQL 类的内容样式表 */
  .accordionContentSQL
   {} {
    border: thick ridge #FFD8D8;
    background-color: #E7E3C9;
    border-top: none;
    color: #000000;
    padding: 5px;
    padding-top: 10px;
    text-align: left;
  }

   /**/ /* SQL 类的标头之超级链接样式表 */
  .accordionHeaderSQL a
   {} {
    color: #FFFFFF;
    text-decoration: none;
  }

   /**/ /* 当鼠标移过 SQL 类的标头之超级链接样式表 */
  .accordionHeaderSQL a:hover
   {} {
    background-color: LightSlateGray; 
    color: Yellow;
    text-decoration: underline overline;
  }

  </style>

脚本代码如下：

< script language = " javascript "  type = " text/javascript " >
   //  设定「淡出效果」属性。
   function  toggleFade()
   {
    // 找出 ID 属性值为 Accordion1_AccordionExtender 的手风琴折之行为。
    var behavior = $find('Accordion1_AccordionExtender');
    if (behavior)
    {
      // 设定是否使用淡出效果。
      behavior.set_FadeTransitions(!behavior.get_FadeTransitions());
      // 显示淡出效果所花费的时间要多久（单位：毫秒）。
      // 若不指定时，这个时间会是 250 毫秒。
      behavior.set_TransitionDuration(1000);
      // 于淡出效果的转换中，每秒要使用多少个画格（Frame）。
      // 若不指定时，会使用 40 个画格。
      behavior.set_FramesPerSecond(100);
    }
  }

   //  设定自动调整大小（AutoSize）的模式。
   function  changeAutoSizeMode()
   {
    // 找出 ID 属性值为 Accordion1_AccordionExtender 的手风琴折之行为。
    var behavior = $find('Accordion1_AccordionExtender');
    // 找出 ID 属性值为 AutoSizeMode 的项目。
    var ctrl = $get('AutoSizeMode');

    if (behavior)
    {
      // 定义 AutoSize 变量。
      var size;
      // 取得所指定的 AutoSize 模式。
      switch (ctrl.selectedIndex)
      {
        // None 模式。
        case 0:
          behavior.get_element().style.height = '400px';
          size = AjaxControlToolkit.AutoSize.None;
          break;
        // Fill 模式。
        case 1:
          behavior.get_element().style.height = '400px';
          size = AjaxControlToolkit.AutoSize.Fill;
          break;
        // Limit 模式。
        case 2:
          behavior.get_element().style.height = '400px';
          size = AjaxControlToolkit.AutoSize.Limit;
          break;
      }
      // 设定 Accordion1_AccordionExtender 的手风琴折之 AutoSize 行为。
      behavior.set_AutoSize(size);
    }
  }
   </ script >

运行结果如下：