Ajax Toolkit Control ——CollapsiblePanelExtender（隐藏&显示效果）

【引用】“This extender targets any ASP.NET Panel control.You specify which control or controls on the page should act as the open and close controllers for the panel.”

 

属性名	描述
TargetControlID	要使用展开和折叠效果的Panel ID
CollapseSize	目标折叠时的大小（单位px）
ExpandedSize	目标展开时的大小（单位px）
Collapsed(true or false）	目标呈现时是否折叠，false(default)--展开，true--折叠
AutoCollapse	当鼠标移出“展开”的Panel时是否自动折叠，false(d)--不折叠，true--折叠
AutoExpand	当鼠标进入“折叠”的Panel时是否自动展开，false(d)--不展开，true--展开
ScrollContents	true--当内容较多时出现滚动条，false--将修剪内容
ExpandControlID	可以点击来展开Panel的控件ID
CollapseControlID	可以点击来折叠Panel的控件ID
CollapsedText	Panel处于折叠状态时的文字，比如："Show Details..."
ExpandedText	Panel处于展开状态时的文字，比如："Hide Details..."
TextLabelID	用来显示Panel的状态的Label控件ID，即CollapsedText and ExpandedText的内容
ImageControlID	跟TextLabelID差不多，显示Panel的状态的图片
ExpandedImage	Panel展开时的图片url
CollapsedImage	Panel折叠时的图片url
ExpandDirection	展开方向（Horizontal or Vertical）

CollapsiblePanelExtender控件的效果也就是隐藏和显示特定控件Panel里的内容，跟Accordion是同一类控件，只是没有那些淡化效果。

示例主要代码：

  <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:Panel ID="Panel1" CssClass="panel1" runat="server">
            <p>
                panel panel panel panel panel
            </p>
           
        </asp:Panel>
        <asp:Label ID="Label1" runat="server">这里用来显示Panel的状态</asp:Label>
        <asp:LinkButton ID="LinkButton1" runat="server">Click Here</asp:LinkButton><asp:Image
            ID="Image1" runat="server" />
        <asp: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/gotop.png" CollapsedImage="~/images/down.png" ExpandDirection="Vertical" />

更多属性请参见>>@http://www.asp.net/ajaxlibrary/act_CollapsiblePanel_Reference.ashx