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 ="Show Details..."
    ExpandedText ="Hide Details"  
    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