彩票走势图

如何使Panel 控件自动维护滚动条位置

转帖|其它|编辑:郝浩|2010-11-26 14:36:50.000|阅读 1451 次

概述:我们知道 Page 的 MaintainScrollPositionOnPostBack 属性为 True 时,PostBack 时页面就会自动维护滚动条位置。而在上一篇「维护 Panel 滚动条位置」文章中,也介绍如何利用 HiddenField 来维护 Panel 滚动条的位置;在这篇文章中,我们将利用相同的原理,扩展 Panel 控件,使得 Panel 控件就自动具有此功能。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

  我们知道 Page 的 MaintainScrollPositionOnPostBack 属性为 True 时,PostBack 时页面就会自动维护滚动条位置。而在上一篇「维护 Panel 滚动条位置」文章中,也介绍如何利用 HiddenField 来维护 Panel 滚动条的位置;在这篇文章中,我们将利用相同的原理,扩展 Panel 控件,使得 Panel 控件就自动具有此功能。

  我们将继承 Panel 控件下来命名为 TBPanel ,如同 Page 一样,在 TBPanel 中新增一个 MaintainScrollPositionOnPostBack 属性,当MaintainScrollPositionOnPostBack 设定 True 时,TBPanel 就会自动维护 PostBack 时滚动条的位置。

TBPanel 完整的程序代码如下

1Imports System
2Imports System.Collections.Generic
3Imports System.ComponentModel
4Imports System.Text
5Imports System.Web
6Imports System.Web.UI
7Imports System.Web.UI.WebControls
8
9<ToolboxData("<{0}:TBPanel runat=server></{0}:TBPanel>")> _
10Public Class TBPanelClass TBPanel
11 Inherits System.Web.UI.WebControls.Panel
12 Private FMaintainScrollPositionOnPostBack As Boolean = False
13
14 /**/''' <summary>
15 ''' PostBack 時自動維護捲軸位置。
16 ''' </summary>
17 < _
18 Description("PostBack 時自動維護捲軸位置。"), _
19 DefaultValue(False) _
20 > _
21 Public Property MaintainScrollPositionOnPostBack()Property MaintainScrollPositionOnPostBack() As Boolean
22 Get
23 Return FMaintainScrollPositionOnPostBack
24 End Get
25 Set(ByVal value As Boolean)
26 FMaintainScrollPositionOnPostBack = value
27 End Set
28 End Property
29
30 /**/''' <summary>
31 ''' 維護捲軸位置。
32 ''' </summary>
33 Private Sub DoMaintainScrollPosition()Sub DoMaintainScrollPosition()
34 Dim oScript As StringBuilder
35 Dim sScript As String
36 Dim oScrollPosX As HiddenField '記錄水平捲軸位置
37 Dim oScrollPosY As HiddenField '記錄垂直捲軸位直
38
39 oScript = New StringBuilder()
40 oScript.Append("function Panel_SaveScrollPosition(PanelID){")
41 oScript.Append("document.getElementById(PanelID+'_ScrollPosX').value = document.getElementById(PanelID).scrollLeft;")
42 oScript.Append("document.getElementById(PanelID+'_ScrollPosY').value = document.getElementById(PanelID).scrollTop;}")
43 oScript.AppendLine()
44
45 oScript.Append("function Panel_RestoreScrollPosition(PanelID){")
46 oScript.Append("document.getElementById(PanelID).scrollLeft = document.getElementById(PanelID+'_ScrollPosX').value;")
47 oScript.Append("document.getElementById(PanelID).scrollTop = document.getElementById(PanelID+'_ScrollPosY').value;}")
48 oScript.AppendLine()
49
50 Me.Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "PanelScrollFunction", oScript.ToString(), True)
51
52 oScrollPosX = New HiddenField()
53 oScrollPosX.ID = Me.ClientID & "_ScrollPosX"
54 Me.Controls.Add(oScrollPosX)
55
56 oScrollPosY = New HiddenField
57 oScrollPosY.ID = Me.ClientID & "_ScrollPosY"
58 Me.Controls.Add(oScrollPosY)
59
60 '頁面 Sumbit 時,記錄 Panel 的水平及垂直捲軸位置
61 sScript = "Panel_SaveScrollPosition('" & Me.ClientID & "');"
62 Me.Page.ClientScript.RegisterOnSubmitStatement(Me.GetType(), Me.ID & "_SavePanelScroll", sScript)
63
64 If Me.Page.IsPostBack Then
65 '當 PostBack 時,利用 HiddenField 記錄的值來維護 Panel 捲軸位置
66 oScrollPosX.Value = Me.Page.Request.Form(oScrollPosX.ClientID)
67 oScrollPosY.Value = Me.Page.Request.Form(oScrollPosY.ClientID)
68 sScript = "Panel_RestoreScrollPosition('" & Me.ClientID & "');"
69 Me.Page.ClientScript.RegisterStartupScript(Me.GetType(), Me.ID & "_SetPanelScroll", sScript, True)
70 End If
71 End Sub
72
73 Protected Overrides Sub OnLoad()Sub OnLoad(ByVal e As System.EventArgs)
74 MyBase.OnLoad(e)
75 If Me.Visible AndAlso (Not Me.DesignMode) Then
76 If Me.MaintainScrollPositionOnPostBack Then
77 DoMaintainScrollPosition() '維護捲軸位置
78 End If
79 End If
80 End Sub
81End Class
82

  程序代码中主要是透过 DoMaintainScrollPosition 方法,是用来维护滚动条位置。在此方法中会输出二个 HiddenField 来记录水平及垂直滚动条的位置,并在页面上注册 Panel_SaveScrollPosition 及 Panel_RestoreScrollPosition 二个 JavaScript 函式,当页面 Sumbit 时会呼叫 Panel_SaveScrollPositio 函式将 Panel 的滚动条位置记录于 HiddenField,而 PostBack 后重新载入页面时会呼叫 Panel_RestoreScrollPosition 来还原滚动条位置。

 


 

 


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:网络转载

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP