Atlas study:使用Accordion实现页面多个块状区域的显隐

Accordion控件主要用于多个块状区域的显示隐藏，并提供了一些动态效果，可以用于做动态菜单等。
每个Accordion可以包含多个AccordionPane，而AccordionPane又会有Header和Content模板，具体结构如下：

<atlasToolkit:Accordion
    ID="MyAccordion"
    runat="Server"
    SelectedIndex="0"
    HeaderCssClass="accordionHeader"
    ContentCssClass="accordionContent"
    AutoSize="None"
    FadeTransitions="true"
    TransitionDuration="250"
    FramesPerSecond="40">
       <atlasToolkit:AccordionPane
        HeaderCssClass="accordionHeader"
        ContentCssClass="accordionContent">
        <Header> . . . </Header>
        <Content> . . . </Content>
    </atlasToolkit:AccordionPane>        
    .
    .
    .
</atlasToolkit:Accordion>

该控件支持以下三种AutoSize模式：
None - 该模式下AccordionPane的伸缩不受限制，会根据AccordionPane内容进行伸缩以使内容显示完全；
Limit - 该模式下AccordionPane的高度不能超过Height属性限制；
Fill - 该模式下无论AccordionPane的内容多少都会按照显示全Height高度。
需要注意的是，在采用Limit和Fill模式时一定要设定Height熟悉值，否则会造成点击AccordionPane Header时造成浏览器崩溃。
其他属性信息：

• SelectedIndex - 初始化时显示的AccordionPane索引；
• HeaderCssClass - 设定Header CSS样式；
• ContentCssClass - 设定Content CSS样式；
• FadeTransitions - True使用渐变效果, False使用标准过渡效果。；
• TransitionDuration - 设定渐变所需毫秒数；
• FramesPerSecond - 过渡过程中每秒显示的Frame个数；
• AutoSize - 展示Content内容的模式，如上所属；
• Header - Header模板用于放置AccordionPane的头信息；
• Content - Content模板用于放置AccordionPane的内容信息。