AJAX ControlToolkit學習日誌-CollapsiblePanel(6)

      CollapsiblePanel控制項用於實作類別似於XP中的可摺疊的面板功能。

首先看一個樣本：

1)建立一個ASP.NET AJAX-Enabled Web Project工程項目，命名為CollapsiblePanel1。

2)在Default.aspx中拖放兩個Panel。其ID分別為CollapsibleHeaderPanel和CollapsibleContentPanel。視圖如下：

3)在CollapsibleHeaderPanel中添加一個Label和ImageButton，用於提示可以展開或摺疊。視圖如下：

4)在頁面中添加一個CollapsiblePanel。並對其的一些屬性進行設定。視圖如下：

CollapsiblePanel的代碼如下：1        <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" TargetControlID="CollapsibleContentPanel" CollapseControlID="CollapsibleHeaderPanel" ExpandControlID="CollapsibleHeaderPanel" ExpandDirection="Vertical"
2         TextLabelID="label1" CollapsedText="Hide Details" ExpandedText="Show Details" Collapsed="true"
3          ImageControlID="imageButton1" CollapsedImage="expand_blue.jpg" ExpandedImage="collapse_blue.jpg" SuppressPostBack="true" runat="server">
4        </cc1:CollapsiblePanelExtender>

下面對其代碼進行一點解釋：
      a)TargetControlID:該屬性指定一個Panel，該Panel就是CollapsiblePanel要擴充顯示或摺疊的內容面板。
      b)CollapseControlID/ExpandControlID:該屬性指定控制摺疊/擴充的控制項ID。
      c)ExpandDirection:指定Panel的擴充方向。
      d)TextLabelID:指定一個控制項，可以在擴充或摺疊Panel時顯示CollapsedText/ExpandedText中的內容。
      e)CollapasedText/ExpandedText:Panel摺疊/擴充時的文本。
      f)Collapsed:指定頁面匯入時Panel是摺疊還是擴充。
      g)ImageControlID:指定一個控制項，在擴充時顯示ExpandedImage中的映像;在摺疊時顯示CollapsedImage中的映像。
      h)ExpandedImage/CollapsedImage:在擴充/摺疊時顯示不同的映像。
      i)SuppressPostBack:禁止回傳。

頁面所有代碼如下：    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
        &nbsp;<asp:Panel ID="CollapsibleHeaderPanel" BorderWidth="1px" BorderColor="Blue" Height="16px" runat="server" Width="595px">
        <div>gjeojgoejgoejgojgoejegojoegeg &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
            <asp:Label ID="label1" runat="server"></asp:Label>
            &nbsp;
            <asp:ImageButton ID="imageButton1" ImageUrl="~/expand_blue.jpg" AlternateText="Show Details" runat="server" /></div>
        <div>
            &nbsp;</div>
        
        </asp:Panel>
        <asp:Panel ID="CollapsibleContentPanel" BorderWidth="1px" BorderColor="ControlDark" Height="0px"  runat="server">
        <p style="overflow:hidden">fdddddddddddddddddddddddddddddfefeeeeeeeeeeeee</p></asp:Panel>
    </div>
    <div>
        <br />
        <br />
        <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" TargetControlID="CollapsibleContentPanel" CollapseControlID="CollapsibleHeaderPanel" ExpandControlID="CollapsibleHeaderPanel" ExpandDirection="Vertical"
         TextLabelID="label1" CollapsedText="Hide Details" ExpandedText="Show Details" Collapsed="true"
          ImageControlID="imageButton1" CollapsedImage="expand_blue.jpg" ExpandedImage="collapse_blue.jpg" SuppressPostBack="true" runat="server">
        </cc1:CollapsiblePanelExtender>
        &nbsp;</div>
    </form>

效果預覽：