今天自己要踏上开始学习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。得如下代码:
<
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
>
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
>
最终效果:
(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。
![](https://i-blog.csdnimg.cn/blog_migrate/8301f3bae9ef81523042401358bbe39c.gif)
b )在Default.aspx页面上,拖放一个ScriptManager控件(若不存在ScriptManager)。
![](https://i-blog.csdnimg.cn/blog_migrate/5e606ad5b1d77287e068bf34b18b614b.gif)
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。得如下代码:
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
e )在Accordion中添加css样式,设定一些属性值。最终代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
最终效果:
![](https://i-blog.csdnimg.cn/blog_migrate/7c9f5219b097c5460649aff218e511d5.gif)