Ajax Control Toolkit——Accordion(折叠效果)
Accordion中文有可折叠的意思，这样说来有点抽像，看效果要具体明了得多。在没有接触Ajax Accordion之前，
使用jQuery实现过相同的效果，代码如下：(以下是jQuery中的Slideup方法)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel</title>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { padding: 5px; background: #96E555; cursor: pointer }
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; }
</style>
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next().slideUp();
},function(){
$(this).next().slideDown();
})
})
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery is a JavaScript Library
</div>
</div>
</body>
</html>
Accordion>>
1.一个最简单的Accordion
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Accordion.aspx.cs" Inherits="_Default" %>
2
3 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title>Simple Accordion</title>
8 <style type="text/css">
9 .accordion
10 {
11 width: 400px;
12 }
13
14 .accordionHeader
15 {
16 border: 1px solid #2f4f4f;
17 color: White;
18 background-color: #2E4D7B;
19 font-family: @微软雅黑;
20 font-size: 12px;
21 font-weight: bold;
22 padding: 5px;
23 margin-top: 5px;
24 }
25 .accordionHeaderSelected
26 {
27 border: 1px solid #2F4F4F;
28 color: white;
29 background-color: #5078B3;
30 font-family: @微软雅黑;
31 font-size: 12px;
32 font-weight: bold;
33 padding: 5px;
34 margin-top: 5px;
35 cursor: pointer;
36 }
37
38 .accordionContent
39 {
40 background-color: #D3DEEF;
41 border: 1px dashed #2F4F4F;
42 border-top: none;
43 padding: 5px;
44 padding-top: 10px;
45 }
46 </style>
47 </head>
48 <body>
49 <form id="form1" runat="server">
50 <div>
51 <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
52 </asp:ToolkitScriptManager>
53 <asp:Accordion ID="Accordion1" runat="server" CssClass="accordion" HeaderCssClass="accordionHeader"
54 HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent">
55 <Panes>
56 <asp:AccordionPane runat="server">
57 <Header>
58 Pane 1</Header>
59 <Content>
60 This is some Text</Content>
61 </asp:AccordionPane>
62 <asp:AccordionPane ID="ap1" runat="server">
63 <Header>
64 Pane2</Header>
65 <Content>
66 This is some text in Panel 2</Content>
67 </asp:AccordionPane>
68 <asp:AccordionPane ID="ap2" runat="server">
69 <Header>
70 Panel 3</Header>
71 <Content>
72 this is some Text in Panel 3</Content>
73 </asp:AccordionPane>
74 </Panes>
75 </asp:Accordion>
76 </div>
77 </form>
78 </body>
79 </html>
该控件的还可以绑定数据源作为，将如上代码改用绑定数据源：
1 <asp:SqlDataSource ID="SqlDS1" runat="server"
ConnectionString="<%$ ConnectionStrings:ASPDemoConnectionString %>"
2 SelectCommand="SELECT * FROM [tbArticle]"></asp:SqlDataSource>
3 <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
4 </asp:ToolkitScriptManager>
5 <asp:Accordion ID="Accordion1" runat="server" CssClass="accordion" HeaderCssClass="accordionHeader"
6 HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
7 DataSourceID="SqlDS1">
8 <HeaderTemplate>
9 <!--Template for the Header of databound panes -->
10 <%#Eval("Title") %>
11 </HeaderTemplate>
12 <ContentTemplate>
13 <!--Template for the Content of databound panes -->
14 <%#Eval("Contents") %>
15 </ContentTemplate>
16 </asp:Accordion>
17
当然也可以在处理代码中使用DataSource为控件指定数据源，以上示例可能是叫可能常用到的，若想较为深入的了解该控件的一些特性你可以参看http://www.asp.net/ajaxlibrary/act_Accordion_Reference.ashx，不过都是英文的有几个我自己看得也不是太懂，其中几个关于控件CSS的属性我觉得是必不可少的，SelectedIndex默认值为0，就是展开第一个<content>标签，其它常用属性在代码中很明了了。
由于本人自身也是刚开始学习（@http://www.asp.net/ajaxlibrary/act_tutorials.ashx），这里仅仅是对学习成果的巩固记忆。
