altas(ajax)控件(七)：CollapsiblePanel可折叠面板

< ajaxToolkit:CollapsiblePanelExtender ID ="cpe" runat ="Server"
TargetControlID ="Panel1"
CollapsedSize ="0"
ExpandedSize ="300"
Collapsed ="True"
ExpandControlID ="LinkButton1"
CollapseControlID ="LinkButton1"
AutoCollapse ="False"
AutoExpand ="False"
ScrollContents ="True"
TextLabelID ="Label1"
CollapsedText ="ShowDetails..."
ExpandedText ="HideDetails"
ImageControlID ="Image1"
ExpandedImage ="~/images/collapse.jpg"
CollapsedImage ="~/images/expand.jpg"
ExpandDirection ="Vertical" />

· TargetControlID - 该属性指定一个 Panel ，该 Panel 就是 CollapsiblePanel 要扩展显示或折叠的内容面板。

· CollapsedSize / ExpandedSize - 该属性指定控制折叠 / 扩展的控件大小。

· Collapsed – 默认是否折叠

· AutoCollapse / AutoExpand – 鼠标移上 / 移出时候是否自动显示 ( 不点击 )

· ScrollContents – 是否显示滚动条

· ExpandControlID / CollapseControlID - 该属性指定控制折叠 / 扩展的控件 ID 。

· TextLabelID - 指定一个控件，可以在扩展或折叠 Panel 时显示 CollapsedText/ExpandedText 中的内容。

· CollapsedText / ExpandedText - Panel 折叠 / 扩展时的文本。

· ImageControlID - 指定一个控件，在扩展时显示 ExpandedImage 中的图像 ; 在折叠时显示 CollapsedImage 中的 图像。

· CollapsedImage / ExpandedImage - 在扩展 / 折叠时显示不同的图像。

· ExpandDirection - 指定 Panel 的扩展方向。

效果： http://www.asp.net/AJAX/Control-Toolkit/Live/CollapsiblePanel/CollapsiblePanel.aspx