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
}

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

转载于:https://www.cnblogs.com/gjahead/archive/2007/04/03/698779.html