Partial Public Class _Default Inherits System.Web.UI.Page
Protected Overrides Sub OnLoad(ByVal e As System.EventArgs) testH() MyBase.OnLoad(e) End Sub
Private Function CreateDataSource2() As ICollection Dim dt As New DataTable dt.Columns.Add(New DataColumn("Field1です", GetType(String))) dt.Columns.Add(New DataColumn("Field2", GetType(String))) dt.Columns.Add(New DataColumn("Field3", GetType(String))) dt.Columns.Add(New DataColumn("Field4", GetType(String)))
For i As Integer = 1 To 7 Dim dr As DataRow = dt.NewRow For j As Integer = 1 To dt.Columns.Count dr.Item(j - 1) = String.Format("{0}行目のデータ{1}", i, j) Next dt.Rows.Add(dr) Next Dim dv As New DataView(dt) Return dv End Function
Private Sub testH()
Dim margin As Integer = 30 Dim initialtop As Integer = 300 Dim initialheight As Integer = 150
' 3 x 4 個のPanelを作る Dim pn(2, 3) As Panel ' ← この要素数を変更するだけで、2 x 2 個にも対応可 Dim id(2, 3) As String ' ← この要素数を変更するだけで、2 x 2 個にも対応可 For i As Integer = 0 To pn.GetUpperBound(0) For j As Integer = 0 To pn.GetUpperBound(1) Dim p As New Panel pn(i, j) = p p.BorderStyle = BorderStyle.Groove
' PanelにGridViewを追加 Dim grv As New GridView grv.DataSource = CreateDataSource2() grv.DataBind() For ir As Integer = 1 To grv.Rows.Count - 1 For ic As Integer = 0 To grv.HeaderRow.Cells.Count - 1 grv.Rows(ir).Cells(ic).Style.Add("width", "120px") 'grv.Rows(ir).Cells(ic).Style.Add("position", "absolute") Next Next
' 右下のPanelにScrollBarを表示 p.Controls.Add(grv) If i = pn.GetUpperBound(0) AndAlso j = pn.GetUpperBound(1) Then p.Style.Add("overflow", "auto") p.Attributes.Add("onscroll", "Panel_Scroll()") Else p.Style.Add("overflow", "hidden") End If
Next Next ' ここまで3 x 4 個のPanelを作る
' サイズ変更時のClientScript Dim onresize As String = String.Format("function Panel_Resize(){0}{2} var margin = {3};var w0=document.body.clientWidth;var w=(w0-margin)/{1}-margin;var top={4};var h={5};var item=null;{2}", "{", pn.GetUpperBound(1) + 1, vbCrLf, margin, initialtop, initialheight)
For i As Integer = 0 To pn.GetUpperBound(0) For j As Integer = 0 To pn.GetUpperBound(1)
' スクロール時のClientScript Dim onscroll As String = String.Format("{1}function Panel_Scroll(){0}{1} var x = {2}.scrollLeft;var y={2}.scrollTop;{1}", "{", vbCrLf, id(pn.GetUpperBound(0), pn.GetUpperBound(1)))
For i As Integer = 0 To pn.GetUpperBound(0) For j As Integer = 0 To pn.GetUpperBound(1)
If i = pn.GetUpperBound(0) And j = pn.GetUpperBound(1) Then ' 何もしない Else onscroll += String.Format("var item{2}=document.getElementById('{0}');{1}item{2}.scrollLeft=x;item{2}.scrollTop=y;{1}", id(i, j), vbCrLf, i.ToString + "X" + j.ToString)
DOBON.NETプログラミング掲示板過去ログ
分類:[ASP.NET]
<div>タグを利用して、スクロールバーの表示を行っています。
テーブルを４つ、それぞれ<div>タグで囲み、右下のテーブルだけにスクロールバーを
表記し、上下左右にスクロールできる形です。
スクロールが行われた場合に、右上のテーブル(または左下のテーブル)もシンクして
スクロールするようにしました。
画面サイズが変更になった時に、テーブルサイズを変更し、スクロールバーのサイズも
変更しようと考えています。
しかし、<div>タグのサイズを変更しても一向にスクロールバーのサイズが変更されません。
JavaScriptにて、<div>タグの高さ、幅を取得したら、サイズの変更は行われている
ようなのですが、実際のサイズは変更されていません。
やり方が間違っているのでしょうか。
よろしくお願いします。