第十三篇: Ajax Control Toolkit 控件包--2. CollapsiblePanel (展开和折叠效果）

 

  
    

   
     
   
      
   
     <
   
     asp:ScriptManager 
   
     ID
   
     ="ScriptManager1"
   
      runat
   
     ="server"
   
     >
   
     
 
   
     </
   
     asp:ScriptManager
   
     >
   
     
 
   
     <
   
     br 
   
     />
   
     
 
   
     <
   
     asp:Panel 
   
     ID
   
     ="Panel1"
   
      runat
   
     ="server"
   
      Height
   
     ="30px"
   
      Width
   
     ="275px"
   
     >
   
     
 
   
     <
   
     div 
   
     style
   
     ="background-image: url('Image/bg.png'); color: #FFFFFF; width: 275px; height: 30px; text-align: center; vertical-align: middle; line-height: 30px;"
   
     >
   
     
 新春祝福
   
     <
   
     asp:Label 
   
     ID
   
     ="Label1"
   
      runat
   
     ="server"
   
      Text
   
     ="收缩"
   
     ></
   
     asp:Label
   
     >
   
     
 
   
     <
   
     asp:Image 
   
     ID
   
     ="Image1"
   
      runat
   
     ="server"
   
      
   
     />
   
     
 
   
     </
   
     div
   
     >
   
     
 
   
     </
   
     asp:Panel
   
     >
   
     
 
   
     <
   
     asp:Panel 
   
     ID
   
     ="Panel2"
   
      runat
   
     ="server"
   
      Width
   
     ="275px"
   
     >
   
     
 
   
     <
   
     asp:Image 
   
     ID
   
     ="Image2"
   
      runat
   
     ="server"
   
      ImageUrl
   
     ="~/Image/AJAX.gif"
   
      
   
     />
   
     
 
   
     </
   
     asp:Panel
   
     >
   
     
 
   
     <
   
     br 
   
     />
   
     
 
   
     </
   
     div
   
     >
   
     
 
   
     <
   
     cc1:CollapsiblePanelExtender 
   
     ID
   
     ="CollapsiblePanelExtender1"
   
      runat
   
     ="server"
   
      
 CollapseControlID
   
     ="Panel1"
   
      ExpandControlID
   
     ="Panel1"
   
      
 TargetControlID
   
     ="Panel2"
   
      CollapsedText
   
     ="扩展"
   
      ExpandedText
   
     ="收缩"
   
      
 CollapsedImage
   
     ="~/Image/collapse.jpg"
   
      ExpandedImage
   
     ="~/Image/expand.jpg"
   
     
 TextLabelID
   
     ="Label1"
   
      ImageControlID
   
     ="Image1"
   
      
   
     >
   
     
 
   
     </
   
     cc1:CollapsiblePanelExtender
   
     >
  
    

 

 

常用属性

 1、TargetControlID: 需要展开和折叠的Panel的ID。

 2、CollapsedSize: 目标panel折叠时的大小,使用pixels来表示。

 3、ExpandedSize: 当目标展开时的大小,使用pixels来表示。

 4、Collapsed: 当页面初始化时是否折叠目标Panel。

 5、AutoCollapse - 如果设置为 True，当鼠标指针移出 Panel 区域的时候 Panel 将自动折叠

 6、AutoExpand - 如果设置为 True，当鼠标移入到 Panel 区域的时候 Panel 将自动展开

 7、ScrollContents - 如果设置为 True，当 Panel 的内容大于其本身的大小的情况下，将自动出现相适应的滚动条

 8、ExpandControlID/CollapseControlID - 控制目标 Panel 的折叠或者展开状态的控件 ID， 当点击该控件的时候，目标 Panel 将呈现展开或者折叠的状态， 如果它们被设置为相同的控件，那么这个控件将根据他当前的状态进行改变。

 9、TextLabelID - 用于显示当前目标 Panel 折叠或者展开状态的 Label 控件 ID

 10、CollapsedText - 折叠状态的描述，该描述将用于 TextLabelID 的 Text 属性，这个文本内容同样将是 ImageControlID (如果设置)的 AlternateText 属性值

 11、ImageControlID - 用于用图标表示其展开或者折叠状态的 Image 控件 ID，该控件将自动根据其状态替换其图标为 CollapsedImage 属性指向的图片， 和 ExpandedImage 属性指向的图片。如果指定了 CollapsedText 和 ExpandedText 属性，它们将是该图标控件的 AlternateText 属性值

 12、CollapsedImage - 当目标 Panel 被折叠的时候呈现的图片

 13、ExpandedImage - 当目标 Panel 被展开的时候呈现的图片

 14、ExpandDirection - 可以设置为 "Vertical"(垂直) 或者 "Horizontal(水平)" 标示目标 Panel 的展开方向