本文介绍如何使用ASP.NET中的CollapsiblePanel控件实现页面内容的展开与隐藏功能。通过设置不同的属性，例如目标面板、展开/隐藏控制元素等，可以轻松地为网页增加交互性。
CollapsiblePanel控件，该控件可以显示或者隐藏某一指定的页面面板内的内容。
<%...@PageLanguage="C#"AutoEventWireup="true"CodeFile="CollapsiblePanelDemo.aspx.cs"
Inherits="CollapsiblePanelDemo"%>
<%...@RegisterAssembly="System.Web.Extensions,Version=1.0.61025.0,Culture=neutral,
PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI"TagPrefix="asp"%>
<%...@RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>无标题页</title>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:ScriptManagerID="ScriptManager1"runat="server">
</asp:ScriptManager>
<asp:PanelID="Panel2"runat="server"Height="30px">
<divstyle="padding:5px;cursor:pointer;vertical-align:middle;">
<divstyle="float:left;">折叠标题</div>
<divstyle="float:left;margin-left:20px;"><asp:LabelID="Label1"runat="server">(展开...)</asp:Label></div>
<divstyle="float:right;vertical-align:middle;"><asp:ImageID="Image1"
runat="server"ImageUrl="~/images/expand.jpg"/></div>
</div>
</asp:Panel>
<asp:PanelID="Panel1"runat="server"Height="0">
<br/>
<p>
展开内容
</p>
</asp:Panel>
</div>
<cc1:CollapsiblePanelExtenderID="cpeDemo"runat="Server"
TargetControlID="Panel1"
ExpandControlID="Panel2"
CollapseControlID="Panel2"
Collapsed="True"
TextLabelID="Label1"
ExpandedText="(隐藏...)"
CollapsedText="(展开...)"
ImageControlID="Image1"
ExpandedImage="~/images/collapse.jpg"
CollapsedImage="~/images/expand.jpg"
SuppressPostBack="true"/>
</form>
</body>
</html>
<%...@PageLanguage="C#"AutoEventWireup="true"CodeFile="CollapsiblePanelDemo.aspx.cs" Inherits="CollapsiblePanelDemo"%>
<%...@RegisterAssembly="System.Web.Extensions,Version=1.0.61025.0,Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI"TagPrefix="asp"%><%...@RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>无标题页</title></head><body><formid="form1"runat="server"><div><asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager><asp:PanelID="Panel2"runat="server"Height="30px"><divstyle="padding:5px;cursor:pointer;vertical-align:middle;"><divstyle="float:left;">折叠标题</div><divstyle="float:left;margin-left:20px;"><asp:LabelID="Label1"runat="server">(展开...)</asp:Label></div><divstyle="float:right;vertical-align:middle;"><asp:ImageID="Image1"runat="server"ImageUrl="~/images/expand.jpg"/></div>
</div></asp:Panel><asp:PanelID="Panel1"runat="server"Height="0"><br/><p>展开内容</p></asp:Panel></div><cc1:CollapsiblePanelExtenderID="cpeDemo"runat="Server"TargetControlID="Panel1"ExpandControlID="Panel2"CollapseControlID="Panel2"Collapsed="True"TextLabelID="Label1"ExpandedText="(隐藏...)"CollapsedText="(展开...)"ImageControlID="Image1"ExpandedImage="~/images/collapse.jpg"CollapsedImage="~/images/expand.jpg"SuppressPostBack="true"/></form></body></html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
