【IT168技术文档】

  本章介绍AJAX Control Toolkit中的Accordion组件的使用方法。Accordion翻译成中文是可折叠的意思，如果你想在一个页面里显示多篇文章，但又不想分页或把页面撑得太长，那么你就应该用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>