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>

效果预览：