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