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