Accordion 可折叠面板控件
分享Accordion译为可折叠
一个Accordion控件至少会拥有一个AccordionPane控件，每一个AccordionPane控件都拥有自己的标题（Header）与内容（Content），分别用来显示可折叠的标题和内容。也就是说，要使用Accordion控件，就必须同时使用AccordionPane控件。代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div style="font-size:14px;">
<cc1:Accordion ID="Accordion1" FadeTransitions="true" runat="server">
<Panes>
<cc1:AccordionPane ID="AccordionPane1" runat="server">
<Header><a href="" onclick="return false;">第一个可折叠面板</a></Header>
<Content>第一个可折叠面板内容!<br />第一个可折叠面板内容!<br />
第一个可折叠面板内容!<br />
第一个可折叠面板内容!<br />
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane2" runat="server">
<Header><a href="" onclick="return false;">第二个可折叠面板</a></Header>
<Content>第二个可折叠面板内容!<br />
第二个可折叠面板<br />
第二个可折叠面板<br />
第二个可折叠面板
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane3" runat="server">
<Header><a href="" onclick="return false;">第三个可折叠面板</a></Header>
<Content>第三个可折叠面板内容!<br />
第三个可折叠面板<br />
第三个可折叠面板<br />
第三个可折叠面板
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane4" runat="server">
<Header><a href="" onclick="return false;">第四个可折叠面板</a></Header>
<Content>第四个可折叠面板内容!<br />
第四个可折叠面板<br />
第四个可折叠面板<br />
第四个可折叠面板
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</div>
</form>
</body>
</html>
效果图
崇拜楼主 | 
阿冰
