CollapsiblePanel控件------（可收缩面版）
功能：
可以让页面中的某个区域变得可折叠，即用户可以根据喜好展开或折叠其中的内容。
属性：
TargetControlID：该扩展器目标控件ID，即将要实现折叠、展开功能的控件的ID
ExpandControlID：指定一个服务器控件的ID，当用户点击该控件时，该扩展器的目标Panel控件将展开
CollapseControlID:指定一个服务器控件的ID，当用户点击该控件时，该扩展器的目标Panel控件将折叠
Collapsed：目标Panel控件的初始化状态，true代表折叠，false代表展开
TextLabelID：指定一个服务器Label控件的ID，用来显示此时目标Panel控件的折叠/展开状态
ImageControlID：指定一个服务器端Image控件的ID，用来告知用户此时目标Panel控件的折叠、展开状态
ExpandedText：当目标Panel控件为展开状态时，TextLabelID属性所指定的Label控件中的文字
CollapsedText：当目标Panel控件为折叠时，TextLabelID属性所指定的Label控件中的文字
ExpandedImage：当目标Panel控件为展开状态时，ImageControlID属性所指定的Image控件中图片的URL
CollapsedImage：当目标Panel控件为折叠状态时，ImageControlID属性所指定的Image控件中图片的URL
实例代码：
<head id="Head1" runat="server">
<title>示范可收缩面版（CollapsiblePanel）</title>
</head>
<body>
<form id="CollapsiblePanelForm" runat="server">
<asp:ScriptManager ID="sm" runat="server" />
<div >示范可收缩面版（CollapsiblePanel）<br />
</div>
<div>
请在<strong>“What is ASP.NET AJAX?”</strong>这个 Panel 上，按下鼠标左键来收缩或展开详细的内容介绍。
</div>
<asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px" Width="500px" Style=" background-color:Gray;overflow:hidden;">
<div style="padding:5px; cursor: pointer; vertical-align: middle;">
<div style="float: left;">What is ASP.NET AJAX?</div>
<div style="float: left; margin-left: 20px;">
<asp:Label ID="Label1" runat="server">(Show Details
)</asp:Label>
</div>
<div style="float: right; vertical-align: middle;">
<asp:ImageButton ID="Image1" runat="server" ImageUrl="~/Images/Expand.gif" AlternateText="(Show Details)"/>
</div>
</div>
</asp:Panel>
<asp:Panel ID="Panel1" runat="server" Height="0" Width="500px">
<br />
<input type="image" src="Images/AJAX.gif" alt="ASP.NET AJAX" style="border-width: 0px;" align="right" type="image">
ASP.NET AJAX is a free framework for building a new generation of
richer, more interactive, highly personalized cross-browser web
applications. This new web development technology from Microsoft
integrates cross-browser client script libraries with the ASP.NET 2.0
server-based development framework. In addition, ASP.NET AJAX offers
you the same type of development platform for client-based web pages
that ASP.NET offers for server-based pages. And because ASP.NET AJAX is
an extension of ASP.NET, it is fully integrated with server-based
services. ASP.NET AJAX makes it possible to easily take advantage of
AJAX techniques on the web and enables you to create ASP.NET pages with
a rich, responsive UI and server communication. However, AJAX isn't
just for ASP.NET. You can take advantage of the rich client framework
to easily build client-centric web applications that integrate with any
backend data provider and run on most modern browsers. </p>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo" runat="Server"
TargetControlID="Panel1"
ExpandControlID="Panel2"
CollapseControlID="Panel2"
Collapsed="true"
TextLabelID="Label1"
ImageControlID="Image1"
ExpandedText="(Hide Details)"
CollapsedText="(Show Details)"
ExpandedImage="~/Images/Collapse.gif"
CollapsedImage="~/Images/Expand.gif"
SuppressPostBack="true" />
</form>
</body>
</html>
运行结果：
功能：
可以让页面中的某个区域变得可折叠，即用户可以根据喜好展开或折叠其中的内容。
属性：
TargetControlID：该扩展器目标控件ID，即将要实现折叠、展开功能的控件的ID
ExpandControlID：指定一个服务器控件的ID，当用户点击该控件时，该扩展器的目标Panel控件将展开
CollapseControlID:指定一个服务器控件的ID，当用户点击该控件时，该扩展器的目标Panel控件将折叠
Collapsed：目标Panel控件的初始化状态，true代表折叠，false代表展开
TextLabelID：指定一个服务器Label控件的ID，用来显示此时目标Panel控件的折叠/展开状态
ImageControlID：指定一个服务器端Image控件的ID，用来告知用户此时目标Panel控件的折叠、展开状态
ExpandedText：当目标Panel控件为展开状态时，TextLabelID属性所指定的Label控件中的文字
CollapsedText：当目标Panel控件为折叠时，TextLabelID属性所指定的Label控件中的文字
ExpandedImage：当目标Panel控件为展开状态时，ImageControlID属性所指定的Image控件中图片的URL
CollapsedImage：当目标Panel控件为折叠状态时，ImageControlID属性所指定的Image控件中图片的URL
实例代码：
<head id="Head1" runat="server"> <title>示范可收缩面版（CollapsiblePanel）</title> </head><body> <form id="CollapsiblePanelForm" runat="server"> <asp:ScriptManager ID="sm" runat="server" /> <div >示范可收缩面版（CollapsiblePanel）<br /> </div> <div> 请在<strong>“What is ASP.NET AJAX?”</strong>这个 Panel 上，按下鼠标左键来收缩或展开详细的内容介绍。 </div> <asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px" Width="500px" Style=" background-color:Gray;overflow:hidden;"> <div style="padding:5px; cursor: pointer; vertical-align: middle;"> <div style="float: left;">What is ASP.NET AJAX?</div> <div style="float: left; margin-left: 20px;"> <asp:Label ID="Label1" runat="server">(Show Details)</asp:Label> </div> <div style="float: right; vertical-align: middle;"> <asp:ImageButton ID="Image1" runat="server" ImageUrl="~/Images/Expand.gif" AlternateText="(Show Details)"/> </div> </div> </asp:Panel> <asp:Panel ID="Panel1" runat="server" Height="0" Width="500px"> <br /> <input type="image" src="Images/AJAX.gif" alt="ASP.NET AJAX" style="border-width: 0px;" align="right" type="image">ASP.NET AJAX is a free framework for building a new generation ofricher, more interactive, highly personalized cross-browser webapplications. This new web development technology from Microsoftintegrates cross-browser client script libraries with the ASP.NET 2.0server-based development framework. In addition, ASP.NET AJAX offersyou the same type of development platform for client-based web pagesthat ASP.NET offers for server-based pages. And because ASP.NET AJAX isan extension of ASP.NET, it is fully integrated with server-basedservices. ASP.NET AJAX makes it possible to easily take advantage ofAJAX techniques on the web and enables you to create ASP.NET pages witha rich, responsive UI and server communication. However, AJAX isn'tjust for ASP.NET. You can take advantage of the rich client frameworkto easily build client-centric web applications that integrate with anybackend data provider and run on most modern browsers. </p> </asp:Panel> <ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo" runat="Server" TargetControlID="Panel1" ExpandControlID="Panel2" CollapseControlID="Panel2" Collapsed="true" TextLabelID="Label1" ImageControlID="Image1" ExpandedText="(Hide Details)" CollapsedText="(Show Details)" ExpandedImage="~/Images/Collapse.gif" CollapsedImage="~/Images/Expand.gif" SuppressPostBack="true" /> </form></body></html>运行结果：
