切换面板控件

分享于 

8分钟阅读

Web开发

  繁體

示例图像- togglepanel.gif

介绍

这是一个自由控件 TogglePanel,设计用来显示可以折叠的内容。 控件有两个模板: 一个用于展开状态显示的内容,另一个用于折叠状态中显示的内容( 或者标题)。

ExpandedTemplate 用于正常内容和折叠内容的CollapsedTemplate

这里控件是为 ASP.NET 2.0设计的。

许可证

控件是 LGPL许可协议下的免费和开放源码。

安装

安装控件

你可以按标准方式安装控件:

  • 在你网站的应用程序 root ( 如果还没有存在) 创建""文件夹 inside
  • 将程序集文件 togglepanel.dll 复制到bin文件夹中

你可能希望将该控件添加到编辑器(。Visual Studio 或者 C# 生成器)的工具箱中。 这将允许你在属性窗格中设置它的属性。 按照编辑器的过程向工具箱中添加控件。

使用控件

将控件添加到页面

有两种方法可以将控件添加到页面中:

  • 将控件从工具箱拖到页( 如果它安装在工具箱上) 上。
  • 手动添加代码。将该行添加到页面的顶部:
<%@RegisterTagPrefix="rw"Namespace="rw"Assembly="TogglePanel"%>

然后,在希望显示明细表的位置添加一个标记:

<rw:TogglePanelid="TogglePanel1"runat="server"><ExpandedTemplate></ExpandedTemplate><CollapsedTemplate></CollapsedTemplate></rw:ScheduleGeneral>

设置控件的属性

你应该为 ImageUrl 设置两个值: 折叠状态( 通常是一个加号图像)的ImageUrlCollapsed,以及展开状态( 通常是一个负号)的ImageUrlExpanded。 可以选择将 Collapsed 属性设置为 True 如果你希望控件最初被折叠。

提供模板内容

下一步是添加模板的内容。

有两个模板你应该为两个模板提供内容。 使用智能标记菜单分别编辑两个模板。 你可以向模板中添加任何文本或者控件。

演示页面

控件带有一个演示页面。 该页包含该控件的两个实例:

它的工作原理

控件是从 CompositeControl 派生的。 主要代码在 CreateChildControls 方法中。

方法使用一行和两个单元格构造 HtmlTable 控件。 第一个单元格将包含图像,在第二个单元格中,将添加两个面板。 在给定的时间,只有其中一个面板可见。 添加一个隐藏字段以跟踪客户端上的控件状态以及服务器端的状态。

为了不用 postback 请求就切换面板,可以通过JavaScript打开和关闭这些面板。

下面是 CreateChildControls 方法:

ProtectedOverridesSub CreateChildControls()
 Controls.Clear()
 ' Create a table for the child controls Table1 = New Table
 Controls.Add(Table1)
 ' Copy style attributes (BorderStyle, GridLines, etc.) to child table Table1.CopyBaseAttributes(Me)
 If ControlStyleCreated Then Table1.ApplyStyle(ControlStyle)
 Table1.Rows.Add(New TableRow)
 ' Add a cell for the clickable image Table1.Rows(0).Cells.Add(New TableCell)
 Table1.Rows(0).Cells(0).VerticalAlign = VerticalAlign.Top
 Table1.Rows(0).Cells.Add(New TableCell)
 Image1 = New Image()
 Table1.Rows(0).Cells(0).Controls.Add(Image1)
 ' Image should not keep state, because it can be changed on the client Image1.EnableViewState = False' Create the first panel for the collapsed state PanelCollapsed = New Panel()
 Table1.Rows(0).Cells(1).Controls.Add(PanelCollapsed)
 ' panel should not keep state, because it can be changed on the client PanelCollapsed.EnableViewState = FalseDim item1 AsNew TogglePanelItem()
 ' Instantiate item using the template If (Not CollapsedTemplate IsNothing) Then CollapsedTemplate.InstantiateIn(item1) ' initialize item from templateElseThrowNew HttpException("The CollapsedTemplate is missing")
 EndIf PanelCollapsed.Controls.Add(item1)
 ' Create the second panel for the expanded state PanelExpanded = New Panel()
 Table1.Rows(0).Cells(1).Controls.Add(PanelExpanded)
 PanelExpanded.EnableViewState = FalseDim item2 AsNew TogglePanelItem()
 ' Instantiate item using the template If (Not ExpandedTemplate IsNothing) Then ExpandedTemplate.InstantiateIn(item2) ' initialize item from templateElseThrowNew HttpException("The ExpandedTemplate is missing")
 EndIf PanelExpanded.Controls.Add(item2)
 ' A hidden field is used to keep track of the state, ' even if it changes on the client side Hidden1 = New HtmlInputHidden()
 Controls.Add(Hidden1)
 ' We store the"Collapsed" value in a hidden control (and not in ViewState), ' so that it can be changed on the client side and still be posted back' the value is 'col' for collapsed and empty for expanded Hidden1.Value = IIf(Collapsed, "col", "").ToString()
 'Create the client script for switching between panelsDim clientScript AsString = _
 "var hidden1=document.getElementById('" & Hidden1.ClientID & "');" & _
 "var pe=document.getElementById('" & PanelExpanded.ClientID & "');" & _
 "var pc=document.getElementById('" & PanelCollapsed.ClientID & "');" & _
 "if(hidden1.value!='col') {" & _
 " pe.style.display='none';" & _
 " pc.style.display='block';" & _
 " this.src='" & ResolveUrl(ImageUrlCollapsed) & "';" & _
 " hidden1.value='col';}" & _
 "else{" & _
 " pe.style.display='block';" & _
 " pc.style.display='none';" & _
 " this.src='" & ResolveUrl(ImageUrlExpanded) & "';" & _
 " hidden1.value='';}" Image1.Attributes("onclick") = clientScript
 If (Not DesignMode And Page.IsPostBack) Then' find the postback name for the hidden field' TODO: is there no predefined function for this hack?Dim HiddenClientName AsString = Hidden1.ClientID.Replace("_", "$")
 ' retrieve the state of the control from the request Collapsed = Not (Page.Request.Params.Get(HiddenClientName) <> "col")
 EndIf UpdateLayout()EndSub

的未来

以下是一些改进的想法:

  • 允许切换图像( 目前只在左侧)的不同位置。

如果有人决定扩展这个控件,或者有任何评论,Bug 报告,或者问题,那么很好的听到。

兴趣点

  • ASP.NET 2.0中的模板化控件。

控制  PAN  PANE  面板  Toggle  
相关文章