首先看一个示例:
1)新建一个ASP.NET AJAX-Enabled Web Project工程项目,命名为CollapsiblePanel1。
2)在Default.aspx中拖放两个Panel。其ID分别为CollapsibleHeaderPanel和CollapsibleContentPanel。视图如下:
3)在CollapsibleHeaderPanel中添加一个Label和ImageButton,用于提示可以展开或折叠。视图如下:
4)在页面中添加一个CollapsiblePanel。并对其的一些属性进行设定。视图如下:
CollapsiblePanel的代码如下:
1
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" TargetControlID="CollapsibleContentPanel" CollapseControlID="CollapsibleHeaderPanel" ExpandControlID="CollapsibleHeaderPanel" ExpandDirection="Vertical"
2
TextLabelID="label1" CollapsedText="Hide Details
" ExpandedText="Show Details
" Collapsed="true"
3
ImageControlID="imageButton1" CollapsedImage="expand_blue.jpg" ExpandedImage="collapse_blue.jpg" SuppressPostBack="true" runat="server">
4
</cc1:CollapsiblePanelExtender>
下面对其代码进行一点解释:2
3
4
a)TargetControlID:该属性指定一个Panel,该Panel就是CollapsiblePanel要扩展显示或折叠的内容面板。
b)CollapseControlID/ExpandControlID:该属性指定控制折叠/扩展的控件ID。
c)ExpandDirection:指定Panel的扩展方向。
d)TextLabelID:指定一个控件,可以在扩展或折叠Panel时显示CollapsedText/ExpandedText中的内容。
e)CollapasedText/ExpandedText:Panel折叠/扩展时的文本。
f)Collapsed:指定页面导入时Panel是折叠还是扩展。
g)ImageControlID:指定一个控件,在扩展时显示ExpandedImage中的图像;在折叠时显示CollapsedImage中的图像。
h)ExpandedImage/CollapsedImage:在扩展/折叠时显示不同的图像。
i)SuppressPostBack:禁止回传。
页面所有代码如下:
效果预览: