Ajax(9)Accordion的使用方法

Accordion的几个重要属性：
SelectedIndex：显示默认的时候是选中第几个AccordionPane。
FramesPerSecond：设置Accordion切换的速度。
TransitionDuration：转换的持续时间。（不好意思这是我个人的理解，有不对的地方请指教）
实例HTML代码：

 <cc1:Accordion ID="Accordion1" runat="server"
                           SelectedIndex="1" 
                           HeaderCssClass="accordionHeader" 
                           
                           FadeTransitions="true" 
                           FramesPerSecond="6" 
                           TransitionDuration="200" 　
                           AutoSize="None">
                <Panes>
                    <cc1:AccordionPane runat="server" >
                        <Header  >
                             <a href = "" onclick = "return false;" class = "accordionLink"> Section 1</a>
                        </Header>
                        <Content >
                           <asp:Panel  ID="panel1"  runat="server">
                            <asp:Button ID="button1" runat="server" />
                           </asp:Panel>
                        
                        </Content>
                    
                    </cc1:AccordionPane>
                      <cc1:AccordionPane ID="AccordionPane2"  runat="server" Height="500">
                        <Header  >
                             <a href = "" onclick = "return false;" class = "accordionLink"> Section 2</a>
                        </Header>
                        <Content>
                        <table style="height:400">
                            <tr>
                                <td style="height:400" >
                                
                            <asp:Button ID="button2" runat="server" BackColor="red" />
                        
                                </td>
                            </tr>
                        
                        </table>
                          
                        
                        </Content>
                    
                    </cc1:AccordionPane>
                </Panes>
        </cc1:Accordion>
   

CSS样式：

.accordionHeader
{
    border: 1px solid #f0f0f0;
    color: white;
    background-color: #f0f0f0;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

.accordionContent
{
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

.accordionLink
{
 background-color: #D3DEEF;
    color: white:
}

.watermark {
    background: #FFAAFF;
}

.popupControl {
    background-color:#AAD4FF;
    position:absolute;
    visibility:hidden;
    border-style:solid;
    border-color: Black;
    border-width: 2px;
}

.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}

.modalPopup {
    background-color:#ffffdd;
    border-width:3px;
    border-style:solid;
    border-color:Gray;
    padding:3px;
    width:250px;
}

.sampleStyleA {
    background-color:#FFF;
}

.sampleStyleB {
    background-color:#FFF;
    font-family:monospace;
    font-size:10pt;
    font-weight:bold;
}

.sampleStyleC {
    background-color:#ddffdd;
    font-family:sans-serif;
    font-size:10pt;
    font-style:italic;
}

.sampleStyleD {
    background-color:Blue;
    color:White;
    font-family:Arial;
    font-size:10pt;
}
.accordionHeader
{
    border: 1px solid #D3DEEF;
    color: white;
    background-color: #D3DEEF;
    font-family: Arial, Sans-Serif;
    font-size: 10px;
    font-weight: bold;
    padding: 5px;
    height:5px;
    margin-top: 5px;
    cursor: pointer;
}

.accordionContent
{
    background-color: #D3DEEF;
    border: 1px dashed #fcfcfc;
    border-top: none;
    padding: 5px;
     filter:Alpha(Opacity=50,FinishOpacity=10,Style=1,StartX=0,StartY=0,FinishX=400,FinishY=400);
    padding-top: 10px;
}
.MasterContent
{
    width: 100%;
     background-color: #D3DEEF;    
        filter:Glow(Color=#ffffff,Strength=10);
}
.accordionLink
{
    background-color: #D3DEEF;
    color: white
}

不好意思，上传图片好像出了问题，无法上传预览图片