本文介绍了一个可折叠面板控件的实现方式，通过使用CollapsiblePanelExtender扩展器，可以轻松地创建可折叠的内容区域。该控件允许用户根据需要展开或隐藏详细信息。
CollapsiblePanel可以让页面中的某个区域变得可折叠，即用户可以根据喜好展开或折叠其中的内容。
示例运行效果：
图(1)
图(2)
CollapsiblePanel.aspx代码示例：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CollapsiblePanel.aspx.cs" Inherits="Chapter08_CollapsiblePanel" %>
<!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>CollapsiblePanel Demo</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.collapsePanel
{
background-color:white;
overflow:hidden;
}
.collapsePanelHeader
{
width:100%;
height:30px;
background-image: url(images/bg-menu-main.png);
background-repeat:repeat-x;
color:#FFF;
font-weight:bold;
}
#master_content .collapsePanelHeader a {color:#FFF;}
#master_content .collapsePanelHeader a:hover {text-decoration:none;background:none;}
</style>
</head>
<body>
<form id="CollapsiblePanelForm" runat="server">
<asp:ScriptManager ID="sm" runat="server" />
<div class="demoheading">可折叠的面板</div>
<asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px" Width="500px">
<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_blue.jpg" AlternateText="(Show Details...)"/>
</div>
</div>
</asp:Panel>
<asp:Panel ID="Panel1" runat="server" CssClass="collapsePanel" Height="0" Width="500px">
<br />
<p>
<asp:ImageButton ID="Image2" runat="server" ImageUrl="images/AJAX.gif"
AlternateText="ASP.NET AJAX" ImageAlign="right" />
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_blue.jpg"
CollapsedImage="images/expand_blue.jpg"
SuppressPostBack="true" />
<!--
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
-->
</form>
</body>
</html>
示例运行效果：
图(1)
图(2)
CollapsiblePanel.aspx代码示例：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CollapsiblePanel.aspx.cs" Inherits="Chapter08_CollapsiblePanel" %>
<!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>CollapsiblePanel Demo</title> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .collapsePanel {
background-color:white; overflow:hidden; } .collapsePanelHeader { width:100%; height:30px; background-image: url(images/bg-menu-main.png); background-repeat:repeat-x; color:#FFF; font-weight:bold; } #master_content .collapsePanelHeader a {color:#FFF;} #master_content .collapsePanelHeader a:hover {text-decoration:none;background:none;} </style></head><body> <form id="CollapsiblePanelForm" runat="server"> <asp:ScriptManager ID="sm" runat="server" /> <div class="demoheading">可折叠的面板</div> <asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px" Width="500px"> <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_blue.jpg" AlternateText="(Show Details...)"/> </div> </div> </asp:Panel> <asp:Panel ID="Panel1" runat="server" CssClass="collapsePanel" Height="0" Width="500px"> <br /> <p> <asp:ImageButton ID="Image2" runat="server" ImageUrl="images/AJAX.gif" AlternateText="ASP.NET AJAX" ImageAlign="right" /> 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_blue.jpg" CollapsedImage="images/expand_blue.jpg" SuppressPostBack="true" /> <!-- 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 --> </form></body></html>
扫一扫
9782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
