Go homepage(回首页) Upload pictures (上传图片) Write articles (发文字帖)
The author:(作者)delvpublished in(发表于) 2014/1/27 6:52:05 轻松掌握Ajax.net系列教程九：使用Accordion_[Asp.Net教程]
本章介绍AJAX Control Toolkit中的Accordion组件的使用方法。Accordion翻译成中文是可折叠的意思，如果你想在一个页面里显示多篇文章，但又不想分页或把页面撑得太长，那么你就应该用Accordion了。它能折叠或展开文章区域，维持页面美观的同时还能增强用户体验。
第一步：设置Accordion组件
在这个例子里我们只需要一个Accordion组件、N个AccordionPane组件以及N篇演示文章。首先我们先拖进一个Accordion组件，并作相关设置。具体设置如下。
ContentCssClass是指内容区域的样式名，而HeaderCssClass是指头部区域的样式名，具体的样式大家自行定义，稍后我也会给出我自己用的样式。FadeTransitions是指伸缩内容区域时是否播放渐变效果，FramesPerSecond是指伸缩内容区域的动画桢数，桢数越大动画就越流畅。TransitionDuration是指伸缩区域所需要的时间，单位是毫秒，时间越大，伸缩区域所需要的时间就越长。
最后附上我自己写的样式表：
第二步：添加AccordionPane
设置好Accordion之后我们可以添加内容了。注意所有内容必须在<Panes>标签内，每篇内容对应一个AccordionPane组件。本例子一共有四篇文章，所以我用了四个AccordionPane组件，所有代码如下：
注意：AccordionPane里的<Header>和<Content>标签内的内容是支持HTML和Javascript的。
到了这里一切已经设置完毕，运行！效果如下图：
网页第一次运行时只显示第一章的内容，当我们点击“第二章”后，第一章内容发生折叠，第二章内容同时展开。
结束：
本章介绍了Accordion的使用方法，它能折叠或拉伸网页中的特定区域，令你的页面排版更灵活，单个页面所显示的内容更丰富。同时结合CSS样式和Javascript，你能使它变得更美观更人性化。
赞