轻松掌握Ajax.net系列教程九：使用Accordion

第一步：设置Accordion组件在这个例子里我们只需要一个Accordion组件、N个AccordionPane组件以及N篇演示文章。首先我们先拖进一个Accordion组件，并作相关设置。具体设置如下。<ajaxToolkit:Accordion ID="Accordion1" runat="server"             ContentCssClass="Content"             HeaderCssClass="Header"             FadeTransitions="true"             FramesPerSecond="40"             TransitionDuration="250">            </ajaxToolkit:Accordion>ContentCssClass是指内容区域的样式名，而HeaderCssClass是指头部区域的样式名，具体的样式大家自行定义，稍后我也会给出我自己用的样式。FadeTransitions是指伸缩内容区域时是否播放渐变效果，FramesPerSecond是指伸缩内容区域的动画桢数，桢数越大动画就越流畅。TransitionDuration是指伸缩区域所需要的时间，单位是毫秒，时间越大，伸缩区域所需要的时间就越长。最后附上我自己写的样式表：  .Header{    font-size:12px;    color:#ffffff;    background:#666666;    font-weight:bold;} .Content{    font-size:12px;    color:#003366;    background:#ffffcc;}第二步：添加AccordionPane设置好Accordion之后我们可以添加内容了。注意所有内容必须在<Panes>标签内，每篇内容对应一个AccordionPane组件。本例子一共有四篇文章，所以我用了四个AccordionPane组件，所有代码如下：<ajaxToolkit:Accordion ID="Accordion1" runat="server" ContentCssClass="Content" HeaderCssClass="Header" FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250">            <Panes>                <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">                <Header>                第一章                </Header>                <Content>                这里是第一章的故事：在很久很久以前，从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢？                从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢……                从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢……                从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢……                从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢……                </Content>                </ajaxToolkit:AccordionPane>                 <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">                <Header>                第二章                </Header>                <Content>                 这里是第二章的故事：在很久很久以前，从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢？                从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢……                从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢……                从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢……                从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢……                </Content>                </ajaxToolkit:AccordionPane>                 <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">                <Header>                第三章                </Header>                <Content>                 这里是第三章的故事：在很久很久以前，从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢？                从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢……                从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢……                从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢……                从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢……                </Content>                </ajaxToolkit:AccordionPane>                 <ajaxToolkit:AccordionPane ID="AccordionPane4" runat="server">                <Header>                第四章                </Header>                <Content>                 这里是第四章的故事：在很久很久以前，从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢？                从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢……                从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢……                从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢……                从前有座山，山上有个庙，庙里有个和尚在讲故事，讲什么呢……                </Content>                </ajaxToolkit:AccordionPane></Panes></ajaxToolkit:Accordion>注意：AccordionPane里的<Header>和<Content>标签内的内容是支持HTML和Javascript的。到了这里一切已经设置完毕，运行！效果如下图：