<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Accordion.aspx.cs" Inherits="AJAX_Accordion" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
color: #000000;
background-color: #ffffff;
font-family: Tahoma, 宋体;
font-size: 14px;
margin: 0px;
padding: 0px;
text-align: center;
}
div, form, img, ul, ol, li, dl, dt, dd, p
{
border: 0 none;
margin: 0;
padding: 0;
vertical-align: middle;
}
h1, h2, h3, h4, h5, h6
{
margin: 0;
padding: 0;
}
ul
{
list-style-type: none;
margin: 0;
padding-left: 2px;
}
li
{
line-height: 18px;
}
a
{
color: #000000;
text-decoration: none;
font-size: 12px;
}
a:hover
{
color: #F37114;
text-decoration: underline;
}
.space50
{
height: 50px;
}
.header
{
color: red;
}
.content
{
color: blue;
}
.Accordion
{
line-height: 30px;
text-align: left;
padding-left: 200px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="space50">
</div>
<div class="Accordion">
<%--AJAX控件管理--%>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0" FadeTransitions="true"
TransitionDuration="250" CssClass= "myAccordion" HeaderCssClass="header" ContentCssClass="content" >
<Panes>
<cc1:AccordionPane runat="server">
<Header>
我的咨询
</Header>
<Content>
自主咨询记录
<br />
心理测评记录
<br />
专家分析记录
<br />
本人反馈记录
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane1" runat="server">
<Header>
我的活动
</Header>
<Content>
我的主题
<br />
我的回复
<br />
我的话题
<br />
我的评论
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane2" runat="server">
<Header>
医师管理
</Header>
<Content>
好友咨询师
<br />
收藏咨询师
<br />
预约咨询师
<br />
联系咨询师
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</div>
</form>
</body>
</html>
================================
运行结果：
心理测评记录
专家分析记录
本人反馈记录
它支持以下三种显示和排版方式：
Limit - 它将使得 Accordion 控件永远不能将它的尺寸扩展到规定的高度（Height）属性之外， 如果将 AutoSize 属性设置为 Limit，可能会造成在某种情况下，它里面的内容需要通过滚动条来滚动。
Fill - 它将使得 Accordion 控件永远都保持在其高度（Height）属性规定的高度。
Accordion控件也能够进行数据绑定，通过DataSource或 DataSourceID属性指定一个数据源，然后设置标题数据字段（HeaderTemplate）和内容数据字段（ContentTemplate）。
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>SelectedIndex - 当 Accordion 被初始化的 AccordionPane 页面 ID
HeaderCssClass - 每一个 AccordionPane 标题的 Css 样式。在开发中，我们可以在这里将每一个 AccordionPane 的标题默认 Css 样式设置与此，另外还可以为每一个 AccordionPane 单独指定其 Css 样式。
HeaderSelectedCssClass - 当某一个 AccordionPane 被选中的时候，其标题的 Css 样式。在开发中，我们可以在这里将每一个 AccordionPane 的标题默认 Css 样式设置与此，另外还可以为每一个 AccordionPane 单独指定其 Css 样式。
ContentCssClass - 每一个 AccordionPane 内容的 Css 样式。在开发中，我们可以在这里将每一个 AccordionPane 的标题默认 Css 样式设置与此，另外还可以为每一个 AccordionPane 单独指定其 Css 样式。
FadeTransitions - 如果设置为 True 那么在其选中的 AccordionPane 变化时将出现渐变的效果。
TransitionDuration - 用毫秒表示的渐变效果显示的时间。
AutoSize - 设置 Accordion 的显示和排版方式，你可以在上面的概述中找到它的描述。
RequireOpenedPane - 如果设置为 True 将可以避免当前展开的 AccordionPane 被折叠。
SuppressHeaderPostbacks - 如果设置为 True 将可以避免 AccordionPane 的标题部分被点击触发的页面提交事件。
Panes - AccordionPane 的集合表示
HeaderTemplate - 当采用数据绑定方式时的标题模板
ContentTemplate - 当采用数据绑定方式时的内容模板
DataSource - 数据源
DataSourceID - 数据源控件 ID
Bound To XML:
<asp:XmlDataSource ID="xml1" runat="server" DataFile="~/App_Data/CarsService.xml" XPath="/CarsService/make" />
<ajaxToolkit:Accordion id="xmlBound" runat="server" DataSourceID="xml1" FadeTransitions="true"
HeaderCssClass="accordionHeader" ContentCssClass="accordionContent">
<HeaderTemplate>
Header: <%# Eval("name") %>
</HeaderTemplate>
<ContentTemplate>
Pane: <%# Eval("name") %>
</ContentTemplate>
</ajaxToolkit:Accordion>
<ajaxToolkit:Accordion id="dictionaryBound" runat="server"
HeaderCssClass="accordionHeader" ContentCssClass="accordionContent">
<HeaderTemplate>
Header: <%# Eval("Key") %>
</HeaderTemplate>
<ContentTemplate>
Data: <%# Eval("Value") %>
</ContentTemplate>
</ajaxToolkit:Accordion>
ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"
TransitionDuration="250" AutoSize="None">
<Panes>
<ajaxToolkit:AccordionPane runat="server">
<Header>
<a href="＃" >1. Accordion</a></Header>
<Content>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>