CollapsiblePanel的基本使用

属性列表

属性名称	说 明
TargetControlID	被显示或隐藏的Panel的ID
CollapsedSize	折叠后的尺寸
ExpandedSize	展开后的尺寸
Collapsed	默认Panel是否处于折叠状态
ExpandControlID	激发伸展效果的控件ID
CollapseControlID	激发折叠效果的控件ID
AutoCollapse	失去焦点时是否自动折叠
ScrollContents	Panel内是否显示滚动条
CollapsedText	折叠后显示的文本信息
ExpandedText	展开后显示的文本信息
ImageControlID	使用图片实现折叠和展示时，图片的ID
ExpandedImage	实现展开时使用的图片路径
CollapsedImage	实现折叠时使用的图片路径
ExpandDirection	展开方向，有水平和垂直两种

   

代码示例如下：

   

<style>

.collapsePanel{

width:640px;

height:0px;

background-color:White;

overflow:hidden;

}

.collapsePanelHeader{

width:640px;

height:20px;

color:Yellow;

background-color:Black;

font-weight:bold;

float:left;

padding:5px;

cursor:pointer;

vertical-align:middle;

}

</style>

   

<div>

 

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"

CollapseControlID="collapsePanelHeader"

ExpandControlID="collapsePanelHeader"

TextLabelID="lblMessage" CollapsedText="show " ExpandedText="close "

TargetControlID="collapsePanel1">

</cc1:CollapsiblePanelExtender>

<br />

<asp:Panel ID="collapsePanelHeader" runat="server" CssClass="collapsePanelHeader">show

<asp:Label ID="lblMessage" runat="server" >show</asp:Label>

</asp:Panel>

<br />

<asp:Panel ID="collapsePanel1" runat="server" CssClass="collapsePanel" >

<table width="95%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td align="left" colspan="5" class="linetext"><a href="BookDetail.aspx?bid=4943" target="_blank"><strong>Effective C# 中文版改善C#程序的50种方法</strong></a></td>

</tr>

<tr>

<td align="left" colspan="5" class="linetext">本书围绕一些关于C#和.NET的重要主题，包括C#语言元素、.NET资源管理、使用C#表达设计、创建二进制组件和使用框架等，讲述了最常见的50个问题的解决方案，为程序员提供了改善C#和.NET程序的方法。本书通过将每个条款构建在之前的条款之上，并合理地利用之前的条款，来让读者最大限度地学习书中的内容，为其在不同情况下使用最佳构造提供指导。

　　本书适合各层次的C#程序员阅读，同时可以推荐给高校教师（尤其是软件学院教授C#/.NET课程的老师），作为C#双语教学的参考书、..</td>

</tr>

<tr>

<td colspan="5" class="linetext">&nbsp;</td>

</tr>

<tr>

<td align="left" class="linetext"><strong><s>定价：49元</s></strong> </td>

<td align="left" class="colorredbig">折扣价：38元</td>

<td align="left" class="colorredbig"> 折扣：75折</td>

<td class="linetext">&nbsp;</td>

<td class="linetext">&nbsp;</td>

</tr>

</table>

</asp:Panel>

</div>

 

 

红色部分的代码为关键点。

CollapseControlID、和ExpandControlID 都是指定为collapsePanelHeader，展开和收拢都由collapsePanelHeader 这个面板来控制.

collapsePanel1为被展开的面板。用于承载需要展示的内容。