AJAX ControlToolkit学习日志-Accordion
今天自己要踏上开始学习AJAX ControlToolkit的旅程了。它提供了对许多已经封装好的可以直接使用的控件。今天自己学习了Accordion控件,它是一个可折叠的控件。
(1)Accordion控件重要属性介绍
a )RequireOpenedPane:当单击控件的Pane中的header时,是否关闭打开的Pane。当值为True时,则不关闭该Pane;当值为False时,则关闭该Pane。
b )SuppressHeaderPostBacks:当在客户端单击控件的Pane中的header中的元素时,是否阻止其进行回传。当值为True时,则阻止其回传;当值为False时,则不阻止其回传。
c )FadeTransitions:当值为True时,则使用淡入淡出的转化效果;当值为False时,则使用标准的转化效果。
d )TransitionDuration:设定转换的时间(或速度)。数值越小,转换越快;数值越大,转换越慢。
e )FramesPerSecond:每秒的帧数。
f )SelectedIndex:设定页面初始导入时显示的Pane。值为0,为第一个;值为1,为第二个。
g )HeaderCssClass:设定Pane中header的css样式。
h )ContentCssClass:设定Pane中Content的css样式。
(2)Accordion控件的使用
a )文件-新建-项目,在新建项目对话框中,新建一个ASP.NET AJAX-Enabled Web Project。
b )在Default.aspx页面上,拖放一个ScriptManager控件(若不存在ScriptManager)。
c )在页面中拖放一个Accordion。它会在页面的"源"中添加这么两句话。
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1"%> //用于注册该控件包
//创建一个Accordion
<cc1:Accordion ID="Accordion1" runat="server">
</cc1:Accordion>
d)在Accordion中添加Pane。在Accordion中先添加一个Panes标记。然后可以拖放一个AccordionPane到Panes中或者直接在Panes中添加AccordionPane。得如下代码:
e )在Accordion中添加css样式,设定一些属性值。最终代码如下:
最终效果:
(1)Accordion控件重要属性介绍
a )RequireOpenedPane:当单击控件的Pane中的header时,是否关闭打开的Pane。当值为True时,则不关闭该Pane;当值为False时,则关闭该Pane。
b )SuppressHeaderPostBacks:当在客户端单击控件的Pane中的header中的元素时,是否阻止其进行回传。当值为True时,则阻止其回传;当值为False时,则不阻止其回传。
c )FadeTransitions:当值为True时,则使用淡入淡出的转化效果;当值为False时,则使用标准的转化效果。
d )TransitionDuration:设定转换的时间(或速度)。数值越小,转换越快;数值越大,转换越慢。
e )FramesPerSecond:每秒的帧数。
f )SelectedIndex:设定页面初始导入时显示的Pane。值为0,为第一个;值为1,为第二个。
g )HeaderCssClass:设定Pane中header的css样式。
h )ContentCssClass:设定Pane中Content的css样式。
(2)Accordion控件的使用
a )文件-新建-项目,在新建项目对话框中,新建一个ASP.NET AJAX-Enabled Web Project。
b )在Default.aspx页面上,拖放一个ScriptManager控件(若不存在ScriptManager)。
c )在页面中拖放一个Accordion。它会在页面的"源"中添加这么两句话。
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1"%> //用于注册该控件包
//创建一个Accordion
<cc1:Accordion ID="Accordion1" runat="server">
</cc1:Accordion>
d)在Accordion中添加Pane。在Accordion中先添加一个Panes标记。然后可以拖放一个AccordionPane到Panes中或者直接在Panes中添加AccordionPane。得如下代码:
<cc1:Accordion ID="Accordion1" runat="server">
<Panes>
<cc1:AccordionPane ID="AccordionPane1" runat="server">
<Header>ASP.NET AJAX</Header>
<Content>
ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX ASP.NET AJAX 学习
学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习
ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane2" runat="server">
<Header>Accordion</Header>
<Content>
Accordion 学习Accordion 学习Accordion 学习Accordion 学习Accordion 学习
Accordion 学习Accordion 学习Accordion 学习Accordion 学习Accordion 学习
Accordion 学习Accordion 学习Accordion 学习Accordion 学习Accordion 学习
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
<Panes>
<cc1:AccordionPane ID="AccordionPane1" runat="server">
<Header>ASP.NET AJAX</Header>
<Content>
ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX ASP.NET AJAX 学习
学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习
ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane2" runat="server">
<Header>Accordion</Header>
<Content>
Accordion 学习Accordion 学习Accordion 学习Accordion 学习Accordion 学习
Accordion 学习Accordion 学习Accordion 学习Accordion 学习Accordion 学习
Accordion 学习Accordion 学习Accordion 学习Accordion 学习Accordion 学习
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
e )在Accordion中添加css样式,设定一些属性值。最终代码如下:
1 <cc1:Accordion ID="Accordion1" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" SuppressHeaderPostbacks="true" RequireOpenedPane="false" runat="server">
2 <Panes>
3 <cc1:AccordionPane ID="AccordionPane1" runat="server">
4 <Header>ASP.NET AJAX</Header>
5 <Content>
6 ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX ASP.NET AJAX 学习
7 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习
8 ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习
9 </Content>
10 </cc1:AccordionPane>
11 <cc1:AccordionPane ID="AccordionPane2" runat="server">
12 <Header>Accordion</Header>
13 <Content>
14 Accordion 学习Accordion 学习Accordion 学习Accordion 学习Accordion 学习
15 Accordion 学习Accordion 学习Accordion 学习Accordion 学习Accordion 学习
16 Accordion 学习Accordion 学习Accordion 学习Accordion 学习Accordion 学习
17 </Content>
18 </cc1:AccordionPane>
19 </Panes>
20 </cc1:Accordion>
2 <Panes>
3 <cc1:AccordionPane ID="AccordionPane1" runat="server">
4 <Header>ASP.NET AJAX</Header>
5 <Content>
6 ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX ASP.NET AJAX 学习
7 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习
8 ASP.NET AJAX 学习ASP.NET AJAX 学习ASP.NET AJAX 学习
9 </Content>
10 </cc1:AccordionPane>
11 <cc1:AccordionPane ID="AccordionPane2" runat="server">
12 <Header>Accordion</Header>
13 <Content>
14 Accordion 学习Accordion 学习Accordion 学习Accordion 学习Accordion 学习
15 Accordion 学习Accordion 学习Accordion 学习Accordion 学习Accordion 学习
16 Accordion 学习Accordion 学习Accordion 学习Accordion 学习Accordion 学习
17 </Content>
18 </cc1:AccordionPane>
19 </Panes>
20 </cc1:Accordion>
最终效果: