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