1. Introduction:
Accordion是ajaxtoolkit的能够使html页面折叠起来的一个控件。结构是一个accordion下面有几个accordionPane控件, accordionPane相当于Pane控件, 包括Header和Content两部分, accordionPane里面可以显示文本或者是其它的数据绑定的东西,这个控件的效果是每次页面上只能显示出来一个accordionPane的内容。我个人觉得结合CSS使用accordion可以实现很漂亮的左侧菜单。
2. Properties:
<ajaxToolkit:Accordion
ID="MyAccordion"
runat="Server"
SelectedIndex="0"
HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent"
AutoSize="None"
FadeTransitions="true"
TransitionDuration="250"
FramesPerSecond="40"
RequireOpenedPane="false"
SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit:AccordionPane
HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent">
<Header> . . . </Header>
<Content> . . . </Content>
</ajaxToolkit:AccordionPane>
.
.
.
</Panes>
<HeaderTemplate>...</HeaderTemplate>
<ContentTemplate>...</ContentTemplate>
</ajaxToolkit:Accordion>
上面就是个完整的accordion结构。其中斜体部分为可选的设置。
a. SelectedIndex : 当一个页面被加载时一个accordion默认显示的accordionPane索引号。从0开始。
b. HeaderCssClass: 每个AccordionPane的header部分的css样式。
c. HeaderSelectedCssClass: 当某个AccordionPanea被选中时,其标题的Css样式。
d. ContentCssClass: 每个AccordionPane的内容Css样式。
e. FadeTransitions: 如果设置为true,那么当选中某个AccordionPane时会出现渐变的效果。
f. TransitionDuration: 展开或者折叠一个AccordionPane的时间,以毫秒为单位计算。
g. FramesPerSecond: 展开或者折叠一个AccordionPane每秒钟的帧数。
h. AutoSize: Accordion的显示和排版方式。
Accordion 支持以下三种显示和排版方式:
- None - Accordion 在其展开或者折叠过程中,将根据它内部显示的内容自动尺寸的变化,不受到任何的条件限制。 如果将 AutoSize 属性设置为 None 它将可能造成页面上的其它元素跟随 Accordion 的尺寸变化产生向上或者向下的移动。
- Limit - 它将使得 Accordion 控件永远不能将它的尺寸扩展到规定的高度(Height)属性之外, 如果将 AutoSize 属性设置为 Limit,可能会造成在某种情况下,它里面的内容需要通过滚动条来滚动。
- Fill - 它将使得 Accordion 控件永远都保持在其高度(Height)属性规定的高度。
i. RequireOpenedPane: 如果设置为true,如果展开一个accordionPane,它就不再会被折叠。
j. SupporessHeaderPostbakcs: 如果设置为True,那么可以避免当点击某个Pane时页面会发生提交事件,也就是是否显示页面整个刷新。
k. HeaderTemplate/ContentTemplate, DataSource ,DataSourceID, DataMember.这几个都是数据绑定时用到的,这篇文章不会涉及到。
3. Example:
这里会给出个例子,我也只是使用MS给出的一个例子,然后自己修改了一下下。
我使用的是VS2005, 而且已经安装好了ajaxtoolkit,
第一步: 创建一个toolkit模板:
随便起个名字, 可以为AjaxControlToolKit_Accordion.
第二步: 向页面中拖入accordion和accordionPane控件,默认你已经把control toolkit添加到toolbox了,如下图:
我使用了三个accordionPane来作为例子。
第三步:为accordion何accordionPane设置属性:
我使用了MS提供的几段英文作为content内容,各种属性上面已经说明了,设置如下:
第四步:为accordion何pane设置Css样式(我这里直接把样式放到head节点中的<style>中了,没有用css文件):
4. Result and SourceCode
最后一部分是先看看效果然后提供给大家一个例子的下载地址:
代码下载:
http://download.csdn.net/source/1408897