AjaxToolKit学习笔记 之 Accordion

1.功能描述

功能类似于TAB选项卡，可以将一组功能相似任务相同的内容放在选项卡内，然后通过选项卡的标题查看各组内容．　就像我们VS开发工具中的工具栏．

 

2.属性说明

SelectedIndex：已显示的AccordionPane控件的索引号．

HeaderCssClass：作用于标题的CSS样式．可以指定Accordion控件的HeraderCssClass属性，以此作为所有AccordionPane控件的默认属性值．或者直接指定定单独的AccordionPane控件的HeraderCssClass属性．

ContentCssClass：用于显示内容的CSS样式．使用方法类似于HeaderCssClass．

FadeTransitions：为true时是渐变效果（在伸缩时颜色变淡，伸缩完成后恢复正常）；为false时是标准变换．

TransitionDuration：在选择一标题后伸展和收缩过渡动画持续的时间，单位为毫秒．

FramesPerSecond：用于伸展和收缩过渡动画每秒所需要的帧数．

AutoSize：用于限制Accordion控件展开的高度．None：没有限制；Limit：不能超过控件的最开始设置高度．如果显示内容太多则会出现滚动条．Fill：始终精确保持和高度设置一样的尺寸．

Panes：AccordionPane控件集合．

HeaderTemplate：标题模板，其中包含的标记用于进行数据绑定来显示面板标题．

ContentTemplate：内容模板，其中包含的标记用于进行数据绑定来显示面板内容．

DataSource：指定数据源，必须要调用DataBind（）方法进行数据绑定．

DataSourceID：用数据源的ID来指定一个数据源．

DataMember：当使用DataSourceID来指定数据源时用于绑定的成员．

 

3.实例代码

代码

<style>
.Watermark
{
    background-color : #FF762D ;
    color : #ffffff ;
}

.accordion  {    
           width :  400px ;    
         }    
           
       .accordionHeader  {    
            border :  1px solid #2F4F4F ;    
            color :  white ;    
            background-color :  #2E4d7B ;    
            font-family :  Arial, Sans-Serif ;    
            font-size :  12px ;    
            font-weight :  bold ;    
            padding :  5px ;    
            margin-top :  5px ;    
            cursor :  pointer ;    
         }    
           
        .accordionHeaderSelected  {    
            border :  1px solid #2F4F4F ;    
            color :  white ;    
            background-color :  #5078B3 ;    
            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 ;    
         }    
</style>

 

 

代码

< asp:Accordion  ID ="Accordion1"  runat ="server"  SelectedIndex ="0"  FadeTransitions ="true"  FramesPerSecond ="40"  TransitionDuration ="250"  AutoSize ="None"  RequireOpenedPane ="false"  SuppressHeaderPostbacks ="true"
     CssClass ="accordion"  HeaderCssClass ="accordionHeader"  HeaderSelectedCssClass ="accordionHeaderSelected"  ContentCssClass ="accordionContent" >
         < Panes >
            < asp:AccordionPane  runat ="server"  ID ="AccordionPane1" >
              < Header > AJAX Extensions </ Header >
              < Content >
              < a  href ="#" > Pointer </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > ScriptManager </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > ScriptManagerProxy </ a >
              < a  href ="#" > Timer </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > UpdatePanel </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > UpdateProgress </ a >
              < div  class ="line" >< span ></ span ></ div >
              </ Content >
            </ asp:AccordionPane >
           
            < asp:AccordionPane  runat ="server"  ID ="AccordionPane3" >
              < Header > Dynamic Data </ Header >
              < Content >
              < a  href ="#" > Pointer </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > DynamicControl </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > DynamicDataManager </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > DynamicEntity </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > DynamicFilter </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > DynamicHyperLink </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > DynamicVlidator </ a >
              < div  class ="line" >< span ></ span ></ div >
              </ Content >
            </ asp:AccordionPane >
            < asp:AccordionPane  runat ="server"  ID ="AccordionPane2" >
              < Header > HTML </ Header >
              < Content >
              < a  href ="#" > Pointer </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > Input(Button) </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > Input(Reset) </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > Input(Submit) </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > Input(Text) </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > Input(File) </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > Input(Password) </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > Input(Radio) </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > Input(Hidden) </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > Textarea </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > Table </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > Image </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > Select </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > Horizontal Rule </ a >
              < div  class ="line" >< span ></ span ></ div >
              < a  href ="#" > Div </ a >
              < div  class ="line" >< span ></ span ></ div >
              </ Content >
            </ asp:AccordionPane >
         </ Panes >
        
     </ asp:Accordion >

 

 

4.碰到的问题

无

5.总结

无

6.参考文档：

http://www.asp.net/ajaxlibrary/act_Accordion.ashx