这个控件比较简单,从微软发布这个Ajax的前身Atlas的时候就一直有,功能应用也比较普遍,这个例子早做了,现在工作不忙发出来给新手们一起参考学习学习,完整代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CollapsiblePanelDeml.aspx.cs" Inherits="AppTestAjax.CollapsiblePanelDeml" %>
<%@ 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>Untitled Page</title>
</head>
<body style="text-align: center">
<form id="form1" runat="server">
<div style="text-align: left">
Panel的显示和隐藏功能<br />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1"
CollapseControlID="Image1"
ExpandControlID="Image1"
Collapsed="true"
TextLabelID="Label1"
ImageControlID="Image1"
ExpandedImage="image/collapse.jpg"
CollapsedImage="image/expand.jpg"
SuppressPostBack="true"
TargetControlID="Panel2"
ExpandedText="(Hide Details)"
CollapsedText="(Show Details)"
runat="server">
</cc1:CollapsiblePanelExtender>
<asp:Panel ID="Panel1" runat="server" Height="1px" Width="561px" BackColor="Control">
<table style="height: 30px">
<tr>
<td style="width: 100px; height: 26px;">
</td>
<td style="width: 331px; height: 26px;">
<asp:Label ID="Label1" runat="server">(Show Details)</asp:Label></td>
<td style="width: 100px; height: 26px;">
<a href="#"><asp:Image ID="Image1" runat="server" ImageUrl="~/image/collapse.jpg" AlternateText="(Show Details)"/></a></td>
</tr>
</table>
</asp:Panel>
<br />
<asp:Panel ID="Panel2" runat="server" Height="310px" Width="571px">
<asp:Image ID="Image2" runat="server" Height="301px" ImageUrl="~/image/IMG_1629.JPG"
Width="548px" /></asp:Panel>
<br />
<asp:Image ID="Image3" runat="server" Height="393px" ImageUrl="~/image/IMG_1629.JPG"
Width="566px" />
</div>
<br />
</form>
</body>
</html>
比较简单,偶也就不用解释什么了吧,呵呵,有什么疑问再讨论吧.......一起为中国的软件做点贡献,呵呵。。。。。。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CollapsiblePanelDeml.aspx.cs" Inherits="AppTestAjax.CollapsiblePanelDeml" %>
<%@ 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>Untitled Page</title>
</head>
<body style="text-align: center">
<form id="form1" runat="server">
<div style="text-align: left">
Panel的显示和隐藏功能<br />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1"
CollapseControlID="Image1"
ExpandControlID="Image1"
Collapsed="true"
TextLabelID="Label1"
ImageControlID="Image1"
ExpandedImage="image/collapse.jpg"
CollapsedImage="image/expand.jpg"
SuppressPostBack="true"
TargetControlID="Panel2"
ExpandedText="(Hide Details)"
CollapsedText="(Show Details)"
runat="server">
</cc1:CollapsiblePanelExtender>
<asp:Panel ID="Panel1" runat="server" Height="1px" Width="561px" BackColor="Control">
<table style="height: 30px">
<tr>
<td style="width: 100px; height: 26px;">
</td>
<td style="width: 331px; height: 26px;">
<asp:Label ID="Label1" runat="server">(Show Details)</asp:Label></td>
<td style="width: 100px; height: 26px;">
<a href="#"><asp:Image ID="Image1" runat="server" ImageUrl="~/image/collapse.jpg" AlternateText="(Show Details)"/></a></td>
</tr>
</table>
</asp:Panel>
<br />
<asp:Panel ID="Panel2" runat="server" Height="310px" Width="571px">
<asp:Image ID="Image2" runat="server" Height="301px" ImageUrl="~/image/IMG_1629.JPG"
Width="548px" /></asp:Panel>
<br />
<asp:Image ID="Image3" runat="server" Height="393px" ImageUrl="~/image/IMG_1629.JPG"
Width="566px" />
</div>
<br />
</form>
</body>
</html>