ajax control toolkit 3.5 Accordion实例

使用注意：

1,Accordion和Panes,AccordionPane配合使用

2,AccordionPane放在Panes里

先介绍一下属性：

Accordion的属性：
　　　　CssClass：Accordion的样式
            SelectedIndex：要展开的面板的索引号。如果设为-1的话，那会收缩所有的面板。
            HeaderCssClass：标题的样式表名称。
            ContentCssClass：内容的样式表名称。
            FadeTransitions：是否出现淡入淡出效果。true-淡入淡出;false-无。
            TrasitionDuration：淡入淡出效果的时间长度。默认250毫秒。
            FramesPerScond：淡入淡出时每秒种的帧数。默认30帧。
            RequireOpenedPane：是否有一个可折叠面板处理展开状态。
            HeaderTemplate：数据绑定时，必须使用这个属性来设定标题模板。
            ContentTemplate：数据绑定时，必须使用这个属性来设定内容模板。
            DataSource：指定数据源。
            DataSourceID：所欲使用的数据源的ID属性。
            DataMemeber：欲绑定的数据成员。   
            AutoSize：自动调整大小的模式(None,Limit,Fill)。 

网页代码：

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " qq.aspx.cs "  Inherits = " web_qq "   %>

<% @ Register assembly = " AjaxControlToolkit "  namespace = " AjaxControlToolkit "  tagprefix = " cc1 "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title > 无标题页 </ title >
     < link  rel ="Stylesheet"  href ="qq.css"   />
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
    
         < asp:ScriptManager  ID ="ScriptManager1"  runat ="server" >
         </ asp:ScriptManager >
         < cc1:Accordion  ID ="Accordion1"  CssClass ="sidebar"  HeaderCssClass ="header"  ContentCssClass ="content"  runat ="server"  FramesPerSecond ="15"  FadeTransitions ="true"  TransitionDuration ="500"  Width ="220"  SelectedIndex ="0" >
         < Panes >
             < cc1:AccordionPane   HeaderSelectedCssClass ="accordionHeaderSelected"  ID ="AccordionPane1"  runat ="server" >
             < Header > 标题：爱上你是一个错 </ Header >
             < Content >
            爱上你是一个错 < br >
            爱上你是一个错 < br >
            爱上你是一个错 < br >
            爱上你是一个错 < br >
             </ Content >
             </ cc1:AccordionPane  >
             < cc1:AccordionPane  HeaderSelectedCssClass ="accordionHeaderSelected"   ID ="AccordionPane2"  runat ="server" >
             < Header > 标题：爱上你是一个错 </ Header >
             < Content >
            爱上你是一个错 < br >
            爱上你是一个错 < br >
            爱上你是一个错 < br >
            爱上你是一个错 < br >
             </ Content >
             </ cc1:AccordionPane  >
             < cc1:AccordionPane  HeaderSelectedCssClass ="accordionHeaderSelected"   ID ="AccordionPane3"  runat ="server" >
             < Header > 标题：爱上你是一个错 </ Header >
             < Content >
            爱上你是一个错 < br >
            爱上你是一个错 < br >
            爱上你是一个错 < br >
            爱上你是一个错 < br >
             </ Content >
             </ cc1:AccordionPane  >
             < cc1:AccordionPane  HeaderSelectedCssClass ="accordionHeaderSelected"   ID ="AccordionPane4"  runat ="server" >
             < Header > 标题：爱上你是一个错 </ Header >
             < Content >
            爱上你是一个错 < br >
            爱上你是一个错 < br >
            爱上你是一个错 < br >
            爱上你是一个错 < br >
             </ Content >
             </ cc1:AccordionPane  >
         </ Panes >
         </ cc1:Accordion >
    
     </ div >
     </ form >
</ body >
</ html >

样式表

body 
{
    background-color : #efefef ;
    font-size : 12px ;
    margin-bottom : 0px ;
    margin-top : 0px ;
    line-height : 18px ;
}
#form1
{
    margin : 0px auto ;
}
.sidebar
{
    background-color : #FFF ;
}
.sidebar .header
{
    font-weight : bold ;
    background-color : #2e4d7b ;
    line-height : 25px ;
    color : #FFF ;
    padding-left : 8PX ;
    padding-right : 8PX ;
    cursor : pointer ;
    border : 1px solid #000 ;
    margin-top : 5px ;
}
.sidebar .accordionHeaderSelected
{
    font-weight : bold ;
    background-color : #000 ;
    line-height : 25px ;
    color : #FFF ;
    padding-left : 8PX ;
    padding-right : 8PX ;
    cursor : pointer ;
    border : 1px solid #000 ;
    margin-top : 5px ;
}
.sidebar .content
{
 padding-left : 8px ;
 padding-right : 8px ;
 border : dashed 1px #000 ;
}