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 >

效果预览：

转载于:https://www.cnblogs.com/qc1984326/archive/2007/03/17/677868.html