jQuery パネル オブジェクト
jQueryをつかったブラウザ画面をパネル配置するオブジェクトを作成します。
パネルとは、ブラウザ画面を、ヘッダ部・フッタ部の内容部に画面分割してレイアウトする仕組みです。
パネルライブラリ説明
定義
$(メインパネルオブジェクト).Panel({
panel:[
{
id:(id),
position:(“top”|”bottom”|”left”|”right”),
(width:(幅)|height:(高さ))
}, …
]
(,borderColor:”#RRGGBB”)
(,borderWidth:n)
});
パネル定義は複数可能
関数
fit() : パネルのレイアウトを現在の画面から再計算する。
setCallbackFun([関数ポインタ] (, …)) : パネルがレイアウトされた場合にコールバックさせる。
setHanleWidth([幅(ドット)]) : リサイザーバーの幅を指定(0～10)する。
[幅] = getHandleWidth() : リサイザーバーの幅を取得する。
show([id]) : 指定IDのパネルを表示状態にします。
hide([id]) : 指定IDのパネルを非表示状態にします。
記述例
Main(div#pM)パネルの周りに、Top(div#pT)、Bottom(div#pB)、Left(div#pL)、Right(div#pR)パネルを配置する。
パネルがリサイズされた場合、用意した_funResize関数を呼び出すように設定する。
var _Panel = $("#pM").Panel({
panel:[ {id:"pT", position:"top"}, {id:"pB", position:"bottom"}, {id:"pL", position:"left", width:180}, {id:"pR", position:"right", width:180} ]}); var _funResize = function(){
(再配置処理)
}
_Panel.setCallbackFun(_funResize);
1 パネルオブジェクトの利用方法
パネルオブジェクトでは、リサイザーを利用しています。
詳しくは、リサイザーの解説を参照してください。
1.1 パネル基本サンプル
パネルは、Top, Bottom, Left, Rightパネルを持ち、中央にメインパネルを持つ、シンプルなサンプルです。
ブラウザのリサイズを受け、パネルが再配置されます。
Top, Bottom, Left, Rightパネルは、さらに、Mainパネルも、HTMLでは、通常のdivで作成します。
利用は、パネルオブジェクトの宣言で、メインパネルの周りに、Top, Bottom, Left, Rightパネルが配置されることを宣言するだけです。
ブラウザのリサイズを受けてパネルを再配置するため、リサイズオブジェクトにパネルの再配置関数を呼び出すようにしています。
図1.1.1 パネル基本サンプル
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content="HTML,javascript,jQuery,css"><meta name="format-detection" content="telephone=no,address=no,email=no"><meta name="viewport" content="width=device-width,initial-scale=1"><script src="/js/jquery.js"></script><script src="/js/jquery-ui.js"></script><link href="/css/iPanel.css" rel="stylesheet" /><link href="/css/jquery-ui.css" rel="stylesheet" /><script src="/js/iPanel_full.js"></script><script src="/js/iResizer_full.js"></script><style type="text/css"><!--html, body {width:100%; height:100%; margin:0px; padding:0px;}--></style><script><!--$(function(){ "use strict"; var _Panel = $("#pM").Panel({ panel:[ {id:"pT", position:"top"}, {id:"pB", position:"bottom"}, {id:"pL", position:"left", width:180}, {id:"pR", position:"right", width:180} ] }); var _funFit = function(){ _Panel.fit(); } var _resize = new iResizer(_funFit);})--></script><title>Fine Frontier - Lesson - jQuery - Practice - Panel </title></head><body><div id="pT" style="background-color:#ffc;">Header Panel (Height:20px)</div><div id="pB" style="background-color:#ccc;">Footer Panel (Height:20px)</div><div id="pL" style="background-color:#cfc;">Left Panel<br>(Width:180px)</div><div id="pR" style="background-color:#fcc;">Right Panel<br>(Width:180px)</div><div id="pM">Main Panel</div></body></html> |
1.2 リサイザーハンドルを持つパネル
パネルは、Top, Bottom, Left, Rightパネルを持ち、中央にメインパネルを持つ、シンプルなサンプルです。
ブラウザのリサイズを受け、パネルが再配置されます。
パネルは境界線を持ち、左右パネルをリサイズ可能とします。
リサイズ操作は、パネルの境界にマウスを重ねると、リサイズバーがアクティブになります。
図1.2.1 リサイザーハンドルを持つパネル 初期表示状態
図1.2.2 リサイザーハンドルを持つパネル パネルリサイズ前と後のイメージ
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content="HTML,javascript,jQuery,css"><meta name="format-detection" content="telephone=no,address=no,email=no"><meta name="viewport" content="width=device-width,initial-scale=1"><script src="/js/jquery.js"></script><script src="/js/jquery-ui.js"></script><link href="/css/iPanel.css" rel="stylesheet" /><link href="/css/jquery-ui.css" rel="stylesheet" /><script src="/js/iPanel_full.js"></script><script src="/js/iResizer_full.js"></script><style type="text/css"><!--html, body {width:100%; height:100%; margin:0px; padding:0px;}--></style><script><!--$(function(){ "use strict"; var _Panel = $("#pM").Panel({ panel:[ {id:"pT", position:"top",}, {id:"pB", position:"bottom",}, {id:"pL", position:"left", width:180, resize:true}, {id:"pR", position:"right", width:180, resize:true}, ], borderColor:"#999",borderWidth:"1px"}); var _funFit = function(){ _Panel.fit(); } var _resize = new iResizer(_funFit);})--></script><title>fine-frontier</title></head><body><div id="pM">Main Panel<br>There is a resize handle on the right side and the left side.</div><div id="pT" style="background:#ccc;">Header Panel</div><div id="pB" style="background:#333;color:#fff;text-align:center;">Footer Panel</div><div id="pL" style="background:#ffd;">Left</div><div id="pR" style="background:#fee;">Right</div></body></html> |
1.3 パネルボーダー幅、ボーダー色指定
パネルは、Top, Bottom, Left, Rightパネルを持ち、中央にメインパネルを持つ、シンプルなサンプルです。
ボーダーの幅、色を指定したサンプルになります。
今回は、メインパネルと左のパネルにパディング表現をいれています。
図1.3.1 パネルボーダー幅、ボーダー色指定
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content="HTML,javascript,jQuery,css"><meta name="format-detection" content="telephone=no,address=no,email=no"><meta name="viewport" content="width=device-width,initial-scale=1"><script src="/js/jquery.js"></script><script src="/js/jquery-ui.js"></script><link href="/css/iPanel.css" rel="stylesheet" /><link href="/css/jquery-ui.css" rel="stylesheet" /><script src="/js/iPanel_full.js"></script><script src="/js/iResizer_full.js"></script><style type="text/css"><!--html, body {width:100%; height:100%; margin:0px; padding:0px;}--></style><script><!--$(function(){ "use strict"; var _Panel = $("#pM").Panel({ panel:[ {id:"pT", position:"top"}, {id:"pB", position:"bottom"}, {id:"pL", position:"left", resize:true}, {id:"pR", position:"right", resize:true}, ], borderColor:"#0a9",borderWidth:"4px"}); var _funFit = function(){ _Panel.fit(); } var _resize = new iResizer(_funFit);})--></script><title>fine-frontier</title></head><body><div id="pM" style="background:#ff9;padding:0.5em;">Main Panel<br>There is a resize handle on the right side and the left side.</div><div id="pB" style="background:#ccc;text-align:center;font-size:x-small;">Copyright 2017 fine-frontier License.</div><div id="pT" style="background:#fca;font-size:large;">TOP</div><div id="pL" style="background:#aca;width:5em;padding:4px;">Left</div><div id="pR" style="background:#9ac;width:10em;">Right</div></body></html> |
1.4 パネルリサイズのコールバック関数のサンプル
パネルは、Top, Bottom, Left, Rightパネルを持ち、中央にメインパネルを持つ、シンプルなサンプルです。
ウインドウリサイズ、パネルのリサイズを、コールバックして画面を書き換えるサンプルです。
ここでは、コールバックされたことがわかるようにメインパネルの内容を変更しています。
図1.4.1 パネルリサイズのコールバック関数のサンプル
図1.4.2 パネルリサイズのコールバック関数のサンプル パネルリサイズ時のコールバック
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content="HTML,javascript,jQuery,css"><meta name="format-detection" content="telephone=no,address=no,email=no"><meta name="viewport" content="width=device-width,initial-scale=1"><script src="/js/jquery.js"></script><script src="/js/jquery-ui.js"></script><link href="/css/iPanel.css" rel="stylesheet" /><link href="/css/jquery-ui.css" rel="stylesheet" /><script src="/js/iPanel_full.js"></script><script src="/js/iResizer_full.js"></script><style type="text/css"><!--html, body {width:100%; height:100%; margin:0px; padding:0px;}--></style><script><!--$(function(){ "use strict"; var _funResize = function(){ $("#pM").html(new Date()+"<br>"+$("#pM").html()); } var _Panel = $("#pM").Panel({ panel:[ {id:"pT", position:"top", resize:false}, {id:"pB", position:"bottom", resize:false}, {id:"pL", position:"left", width:180, resize:true}, {id:"pR", position:"right", width:180, resize:true}, ]}); _Panel.setCallbackFun(_funResize); var _funFit = function(){ _Panel.fit(); } var _resize = new iResizer(_funFit);})--></script><title>fine-frontier</title></head><body><div id="pM">Main Panel</div><div id="pB" style="background:#777">Copyright 2017-2018 fine-frontier License.</div><div id="pT" style="background:#fca">TOP</div><div id="pL" style="background:#aca">Left</div><div id="pR" style="background:#9ac">Right</div></body></html> |
1.5 初期非表示状態のパネル
パネルは、Top, Bottom, Left, Rightパネルを持ち、中央にメインパネルを持つ、シンプルなサンプルです。
左右パネルは、初期表示時、非表示の例です。
非表示パネルは、リサイズバーをスライドで広げることもできますが、リサイズバーをダブルクリックすると元のパネルの大きさに戻ります。
図1.5.1 初期非表示状態のパネル
図1.5.2 初期非表示状態から左パネルを表示に戻す
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content="HTML,javascript,jQuery,css"><meta name="format-detection" content="telephone=no,address=no,email=no"><meta name="viewport" content="width=device-width,initial-scale=1"><script src="/js/jquery.js"></script><script src="/js/jquery-ui.js"></script><link href="/css/iPanel.css" rel="stylesheet" /><link href="/css/jquery-ui.css" rel="stylesheet" /><script src="/js/iPanel_full.js"></script><script src="/js/iResizer_full.js"></script><style type="text/css"><!--html, body {width:100%; height:100%; margin:0px; padding:0px;}--></style><script><!--$(function(){ "use strict"; var _funResize = function(){ $("#pM").html(new Date()+"<br>"+$("#pM").html()); } var _Panel = $("#pM").Panel({panel:[ {id:"pT", position:"top", resize:false}, {id:"pB", position:"bottom", resize:false}, {id:"pL", position:"left", width:180, resize:true}, {id:"pR", position:"right", width:180, resize:true} ]}); _Panel.hide("pL").hide("pR"); // メソッドチェーンの記述 _Panel.setCallbackFun(_funResize); var _funFit = function(){ _Panel.fit(); } var _resize = new iResizer(_funFit);})--></script><title>fine-frontier</title></head><body><div id="pM">Main Panel</div><div id="pB" style="background:#333;color:#fff;font-size:x-small;text-align:center">Copyright 2017-2018 fine-frontier License.</div><div id="pT" style="background:#ccf; height:2em;">TOP</div><div id="pL" style="background:#ffa;">Left</div><div id="pR" style="background:#aaf;">Right</div></body></html> |
1.6 重ねたパネル
パネルは幾重に重ねることもできます。今回は上下左右パネルを４重に組み合わせた例です。
パネルは宣言された順番に外側から内側に向かって配置されます。
なお、ライブラリでは重ねるパネルに制限をつけていません。
図1.6.1 重ねたパネル
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content="HTML,javascript,jQuery,css"><meta name="format-detection" content="telephone=no,address=no,email=no"><meta name="viewport" content="width=device-width,initial-scale=1"><script src="/js/jquery.js"></script><script src="/js/jquery-ui.js"></script><link href="/css/iPanel.css" rel="stylesheet" /><link href="/css/jquery-ui.css" rel="stylesheet" /><script src="/js/iPanel_full.js"></script><script src="/js/iResizer_full.js"></script><style type="text/css"><!--html, body {width:100%; height:100%; margin:0px; padding:0px;}--></style><script><!--$(function(){ "use strict"; var _funResize = function(){ $("#pM").html(new Date()+"<br>"+$("#pM").html()); } var _Panel = $("#pM").Panel({panel:[ {id:"pT", position:"top"}, {id:"pB", position:"bottom"}, {id:"pL", position:"left", width:60,}, {id:"pR", position:"right", width:60, resize:true}, {id:"pT2", position:"top"}, {id:"pB2", position:"bottom"}, {id:"pL2", position:"left", width:60, resize:true}, {id:"pR2", position:"right", width:60, resize:true}, {id:"pT3", position:"top"}, {id:"pB3", position:"bottom"}, {id:"pL3", position:"left", width:60, resize:true}, {id:"pR3", position:"right", width:60, resize:true}, {id:"pT4", position:"top"}, {id:"pB4", position:"bottom"}, {id:"pL4", position:"left", width:60, resize:true}, {id:"pR4", position:"right", width:60, resize:true} ],borderColor:"#000",borderWidth:1}); _Panel.setCallbackFun(_funResize); var _funFit = function(){ _Panel.fit(); } var _resize = new iResizer(_funFit);})--></script><title>fine-frontier</title></head><body><div id="pM" style="background:#c00;"> Main</div><div id="pB" style="background:#fee;text-align:center;font-size:x-small">Copyright 2017-2018 fine-frontier License.</div><div id="pT" style="background:#fdd;">Top</div><div id="pL" style="background:#fcc;">Left</div><div id="pR" style="background:#fbb;">Right</div><div id="pT2" style="background:#faa;">Top2</div><div id="pB2" style="background:#f99;">Bottom2</div><div id="pL2" style="background:#f88;">Left2</div><div id="pR2" style="background:#f77;">Right2</div><div id="pT3" style="background:#f66;">Top3</div><div id="pB3" style="background:#f55;">Bottom3</div><div id="pL3" style="background:#f44;">Left3</div><div id="pR3" style="background:#f33;">Right3</div><div id="pT4" style="background:#f22;">Top4</div><div id="pB4" style="background:#f11;">Bottom4</div><div id="pL4" style="background:#f00;">Left4</div><div id="pR4" style="background:#e00;">Right4</div></body></html> |
1.7 パネルオブジェクトの入れ子サンプル
パネルオブジェクト自体を、パネルの子に指定することも可能です。
図1.7.1 パネルオブジェクトの入れ子サンプル
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content="HTML,javascript,jQuery,css"><meta name="format-detection" content="telephone=no,address=no,email=no"><meta name="viewport" content="width=device-width,initial-scale=1"><script src="/js/jquery.js"></script><script src="/js/jquery-ui.js"></script><link href="/css/iPanel.css" rel="stylesheet" /><link href="/css/jquery-ui.css" rel="stylesheet" /><script src="/js/iPanel_full.js"></script><script src="/js/iResizer_full.js"></script><style type="text/css"><!--html, body {width:100%; height:100%; margin:0px; padding:0px;}--></style><script><!--$(function(){ "use strict"; var _funResize = function(){ _PanelL.fit(); _PanelR.fit(); } var _funResizeL = function(){ var d = new Date() $("#pM0").html("L:" + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() +"<br>"+$("#pM0").html()); } var _funResizeR = function(){ var d = new Date() $("#pM1").html("R:" + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()+"<br>"+$("#pM1").html()); } var _Panel = $("#pR").Panel({panel:[ {id:"pT", position:"top"}, {id:"pB", position:"bottom"}, {id:"pL", position:"left", width:400, resize:true} ]}); _Panel.setCallbackFun(_funResize); var _PanelL = $("#pM0").Panel({panel:[ {id:"pT10", position:"top"}, {id:"pB10", position:"bottom"}, {id:"pL10", position:"left", width:40, resize:true}, {id:"pR10", position:"right", width:40, resize:true}, {id:"pT20", position:"top"}, {id:"pB20", position:"bottom"}, {id:"pL20", position:"left", width:40, resize:true}, {id:"pR20", position:"right", width:40, resize:true}, {id:"pT30", position:"top"}, {id:"pB30", position:"bottom"}, {id:"pL30", position:"left", width:40, resize:true}, {id:"pR30", position:"right", width:50, resize:true} ],borderColor:"#000",borderWidth:1}); _PanelL.setCallbackFun(_funResizeL); var _PanelR = $("#pM1").Panel({panel:[ {id:"pT11", position:"top"}, {id:"pB11", position:"bottom"}, {id:"pL11", position:"left", width:40, resize:true}, {id:"pR11", position:"right", width:40, resize:true}, {id:"pT21", position:"top"}, {id:"pB21", position:"bottom"}, {id:"pL21", position:"left", width:40, resize:true}, {id:"pR21", position:"right", width:40, resize:true}, {id:"pT31", position:"top"}, {id:"pB31", position:"bottom"}, {id:"pL31", position:"left", width:40, resize:true}, {id:"pR31", position:"right", width:40, resize:true} ],boderColor:"#000",borderWidth:1}); _PanelR.setCallbackFun(_funResizeR); var _funFit = function(){ _Panel.fit(); } var _resize = new iResizer(_funFit);})--></script><title>fine-frontier</title></head><body><div id="pT" style="background:#e9e">Title Area</div><div id="pB" style="background:#ccc">Copyright 2017-2018 fine-frontier License.</div><div id="pL"> <div id="pM0" style="background:#c00">L-Main</div> <div id="pB10" style="background:#fee">B</div> <div id="pT10" style="background:#fdd">T</div> <div id="pL10" style="background:#fcc">L</div> <div id="pR10" style="background:#fbb">R</div> <div id="pT20" style="background:#faa">T2</div> <div id="pB20" style="background:#f99">B2</div> <div id="pL20" style="background:#f88">L2</div> <div id="pR20" style="background:#f77">R2</div> <div id="pT30" style="background:#f66">T3</div> <div id="pB30" style="background:#f55">B3</div> <div id="pL30" style="background:#f44">L2</div> <div id="pR30" style="background:#f33">R3</div></div><div id="pR"> <div id="pM1" style="background:#00c">R-Main</div> <div id="pB11" style="background:#eef">B</div> <div id="pT11" style="background:#ddf">T</div> <div id="pL11" style="background:#ccf">L</div> <div id="pR11" style="background:#bbf">R</div> <div id="pT21" style="background:#aaf">T2</div> <div id="pB21" style="background:#99f">B2</div> <div id="pL21" style="background:#88f">L2</div> <div id="pR21" style="background:#77f">R2</div> <div id="pT31" style="background:#66f">T3</div> <div id="pB31" style="background:#55f">B3</div> <div id="pL31" style="background:#44f">L3</div> <div id="pR31" style="background:#33f">R3</div></div></body></html> |
外側パネル作成のあとに、内側パネルを作成すると、初期表示が崩れる場合があります。
その場合、すべてのパネル作成された後に、外側パネルの fit 関数を呼び出すことで、綺麗にレイアウト計算されます。
その場合、すべてのパネル作成された後に、外側パネルの fit 関数を呼び出すことで、綺麗にレイアウト計算されます。
1.8 パネルの配置順を指定した回り込みレイアウト
パネルオブジェクトを、上→下→左→右にしてするのではなく、
上→右→下→左の順で指定した場合のパネルレイアウトのサンプルです。
図1.8.1 説明
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content="HTML,javascript,jQuery,css"><meta name="format-detection" content="telephone=no,address=no,email=no"><meta name="viewport" content="width=device-width,initial-scale=1"><script src="/js/jquery.js"></script><script src="/js/jquery-ui.js"></script><link href="/css/iPanel.css" rel="stylesheet" /><link href="/css/jquery-ui.css" rel="stylesheet" /><script src="/js/iPanel_full.js"></script><script src="/js/iResizer_full.js"></script><style type="text/css"><!--html, body {width:100%; height:100%; margin:0px; padding:0px;}--></style><script><!--$(function(){ var _Panel = $("#pM").Panel({panel:[ {id:"pT", position:"top", height:32}, {id:"pL", position:"left", width:68}, {id:"pB", position:"bottom", height:32}, {id:"pR", position:"right", width:68}, {id:"pT2", position:"top", height:30}, {id:"pL2", position:"left", width:66}, {id:"pB2", position:"bottom", height:30}, {id:"pR2", position:"right", width:66}, {id:"pT3", position:"top", height:28}, {id:"pL3", position:"left", width:64}, {id:"pB3", position:"bottom", height:28}, {id:"pR3", position:"right", width:64}, {id:"pT4", position:"top", height:26}, {id:"pL4", position:"left", width:62}, {id:"pB4", position:"bottom", height:26}, {id:"pR4", position:"right", width:62}, {id:"pT5", position:"top", height:24}, {id:"pL5", position:"left", width:60}, {id:"pB5", position:"bottom", height:24}, {id:"pR5", position:"right", width:60} ],borderColor:"#aa0000",borderWidth:1}); var _funFit = function(){ _Panel.fit(); } var _resize = new iResizer(_funFit);})--></script><title>fine-frontier</title></head><body><div id="pM" style="background:#b00;">Main</div><div id="pT" style="background:#fee;">T</div><div id="pL" style="background:#fdd;">L</div><div id="pB" style="background:#fcc;">F</div><div id="pR" style="background:#fbb;">R</div><div id="pT2" style="background:#faa;">T2</div><div id="pL2" style="background:#f99;">L2</div><div id="pB2" style="background:#f88;">B2</div><div id="pR2" style="background:#f77;">R2</div><div id="pT3" style="background:#f66;">T3</div><div id="pL3" style="background:#f55;">L3</div><div id="pB3" style="background:#f44;">B3</div><div id="pR3" style="background:#f33;">R3</div><div id="pT4" style="background:#f22;">T4</div><div id="pL4" style="background:#f11;">L4</div><div id="pB4" style="background:#f00;">B4</div><div id="pR4" style="background:#e44;">R4</div><div id="pT5" style="background:#e33;">T4</div><div id="pL5" style="background:#e22;">L4</div><div id="pB5" style="background:#e11;">B4</div><div id="pR5" style="background:#e00;">R4</div></body></html> |
2 プログラム解説
パネルオブジェクトについて解説します。
最初に、ライブラリを使わず、CSSでパネルを表現してます。
そののち、順を追ってオブジェクトライブラリとして完成させていきます。
2.1 CSSでパネル表現
パネルオブジェクトの説明に入る前に、まずは、標準のCSSを使って画面をパネルレイアウトした例を見てみましょう。
CSSを使ってHeader、Footer、Left、Rightパネル、中央にMainパネルを備えた画面を表現します。
図2.1.1 CSSを使った画面の分割
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content="HTML,javascript,jQuery,css"><meta name="format-detection" content="telephone=no,address=no,email=no"><meta name="viewport" content="width=device-width,initial-scale=1"><script src="/js/jquery.js"></script><style type="text/css"><!--html, body {width:100%; height:100%; margin:0px; padding:0px;}#pT { border:none; margin:0px; padding:0px; position:absolute; overflow:hidden; background-color:#ffc; width:100%; height:20px; top:0px; left:0px;}#pB { border:none; margin:0px; padding:0px; position:absolute; overflow:hidden; background-color:#ccc; width:100%; height:20px; bottom:0px; left:0px;}#pL { border:none; margin:0px; padding:0px; position:absolute; overflow:hidden; background-color:#cfc; width:180px; top:20px; left:0px;}#pR { border:none; margin:0px; padding:0px; position:absolute; overflow:hidden; background-color:#fcc; width:180px; top:20px; right:0px;}#pM { border:none; margin:0px; padding:0px; position:absolute; overflow:hidden; background-color:#fff; top:20px; left:180px;}--></style><script><!--$(function(){ "use strict"; var h = $("body").height(); var w = $("body").width(); $("#pL").height(h-20*2); $("#pR").height(h-20*2); $("#pM").width(w-180*2).height(h-20*2);})--></script><title>fine-frontier</title></head><body><div id="pT" style="">Header Panel (Height:20px)</div><div id="pB" style="">Footer Panel (Height:20px)</div><div id="pL" style="">Left Panel<br>(Width:180px)</div><div id="pR" style="">Right Panel<br>(Width:180px)</div><div id="pM" style="">Main Panel<br>※Resizeには対応していません。</div></body></html> |
●Headerパネル(pH)
高さ:20px固定、幅:100%、画面上部に張り付く矩形領域
●Footerパネル(pF)
高さ:20px固定、幅:100%、画面下部に張り付く矩形領域
●Leftパネル(pL)
高さ:高さ100%-(ヘッダ高さ+フッタ高さ)※、
幅:180px、画面左部に張り付く矩形領域
●Rightパネル(pR)
高さ:高さ100%-(ヘッダ高さ+フッタ高さ)※、
幅:180px、画面左部に張り付く矩形領域
●Mainパネル(pM)
画面全体から、Header、Footer、Right、Rightパネルを除いた領域※
高さ:20px固定、幅:100%、画面上部に張り付く矩形領域
●Footerパネル(pF)
高さ:20px固定、幅:100%、画面下部に張り付く矩形領域
●Leftパネル(pL)
高さ:高さ100%-(ヘッダ高さ+フッタ高さ)※、
幅:180px、画面左部に張り付く矩形領域
●Rightパネル(pR)
高さ:高さ100%-(ヘッダ高さ+フッタ高さ)※、
幅:180px、画面左部に張り付く矩形領域
●Mainパネル(pM)
画面全体から、Header、Footer、Right、Rightパネルを除いた領域※
※の部分は、画面表示時に計算しています。(38-44行目)
CSSとわずかなjavascriptだけで、ブラウザの画面分割が、きれいにできることを確認ください。
左右とメインパネルの高さは、初期表示時に、ブラウザの高さをもとに計算しています。
ただし、初期表示後のブラウザのリサイズにもパネルの再配置は対応していません。
今回のサンプルは、まずは、CSSで基本的なパネルの仕組みを決めました。
まずは、このパネルを配置する点に注目してライブラリ化してみましょう。
2.2 パネルライブラリ第１段階 -パネル配置
「2.1 CSSでパネル表現」で表現したHTML+CSSを、汎用的なJavascriptのライブラリ化します。
メインパネルを中心にサイドパネルを上下左右に配置することは、上下左右のサイドパネルをレイアウト終えた残りの中央部にメインパネルになるようにレイアウト計算します。
前回の積み残し問題として、ブラウザの拡縮に追従してパネル再配置を解決します。
そこで、利用されるのが、リサイザーです。
（リサイザーに関しては、別コーナーでとりあげていますので、そちらを参照ください。）
早速、リサイザーの機能をパネルに取り入れましょう。
なお、ここからは、Javascriptライブラリをプロトタイプ化していきます。
図2.2.1 ライブラリを使ったパネル配置サンプル
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content="HTML,javascript,jQuery,css"><meta name="format-detection" content="telephone=no,address=no,email=no"><meta name="viewport" content="width=device-width,initial-scale=1"><link href="iPanel02.css" rel="stylesheet" /><script src="/js/jquery.js"></script><script src="/js/iResizer.js"></script><script src="iPanel02.js"></script><title>fine-frontier</title><script>$(function(){ var _Panel, _funFit, _resize; _Panel = $("#pM").Panel({panel:[ {id:"pT", position:"top"}, {id:"pB", position:"bottom"}, {id:"pL", position:"left", width:180}, {id:"pR", position:"right", width:180} ]}); _funFit = function(){ _Panel.fit(); } _resize = new iResizer(_funFit);})</script></head><body><div id="pM">Main Panel</div><div id="pB" style="background:#ccc;">Copyright 2017-2018 fine-frontier License.</div><div id="pT" style="background:#fca;">TOP</div><div id="pL" style="background:#aca;">Left</div><div id="pR" style="background:#9ac;">Right</div></body></html> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
var iPanel = function(obj, op){ "use strict"; this.id = obj.attr("id"); this.nPanel = 0; // panel number this.panel = []; // panel def this.iPanel(op); // Call Constructor op = null; return this;};iPanel.prototype={ iPanel:function(op){ "use strict"; var nW, nH, pos, id, i; $("#"+this.id).addClass("panel_inner") .wrap("<div id='"+this.id+"_outer' class='panel_outer' style='visibility:hidden' />"); this.nPanel = op.panel.length; // panel number for(i=0; i<this.nPanel; i++){ this.panel[i] = op.panel[i]; id = this.panel[i].id; pos = this.panel[i].position.toLowerCase(); if(pos!=="left" && pos!=="right" && pos!=="bottom"){ pos = "top"; } this.panel[i].position = pos; $("#"+id).css({"float":"left","display":"brock","top":"0","left":"0","border":"none","margin":"0"}) .appendTo("#"+this.id+"_outer"); $("#"+id).wrap("<div id='wrap_"+id+"' class='panel panel-"+pos+"' />"); this.panel[i].pl = ($("#"+id).css("paddingLeft")).replace(/[^¥d¥.]/g,"")-0; this.panel[i].pr = ($("#"+id).css("paddingRight")).replace(/[^¥d¥.]/g,"")-0; this.panel[i].pt = ($("#"+id).css("paddingTop")).replace(/[^¥d¥.]/g,"")-0; this.panel[i].pb = ($("#"+id).css("paddingBottom")).replace(/[^¥d¥.]/g,"")-0; nW = this.panel[i].width; if(nW!==undefined){ nW -= 0; }else{ nW = $("#"+id).width(); } nH = this.panel[i].height; if(nH!==undefined){ nH -= 0; }else{ nH = $("#"+id).height(); } this.panel[i].width = this.panel[i].height = 0; // 初期化 if(pos==="left" || pos==="right"){ this.panel[i].z = this.panel[i].width = nW; }else{ this.panel[i].z = this.panel[i].height = nH; } } this.fit(); $("#"+this.id+"_outer").css('visibility',''); return this; }, fit:function(){ "use strict"; var oW = $("#"+this.id+"_outer").width(); var oH = $("#"+this.id+"_outer").height(); var oL = 0, oR = 0, oT = 0, oB = 0, n = 0, pos, id, i; for(i=0; i<this.nPanel; i++){ id = this.panel[i].id; pos = this.panel[i].position; if(pos==="left"){ n = this.panel[i].width; $("#wrap_"+id).css({"width":n,"height":oH,"left":oL,"top":oT}); oL += n; oW -= n; }else if(pos==="right"){ n = this.panel[i].width; $("#wrap_"+id).css({"width":n,"height":oH,"right":oR,"top":oT}); oR += n; oW -= n; }else if(pos==="bottom"){ n = this.panel[i].height; $("#wrap_"+id).css({"width":oW,"height":n,"left":oL,"bottom":oB}); oB += n; oH -= n; }else{ n = this.panel[i].height; $("#wrap_"+id).css({"width":oW,"height":n,"left":oL,"top":oT}); oT += n; oH -= n; } $("#"+id).width($("#wrap_"+id).width() - (this.panel[i].pl + this.panel[i].pr)) .height($("#wrap_"+id).height() - (this.panel[i].pt + this.panel[i].pb)); } $("#"+this.id).css({"width":oW,"height":oH,"left":oL,"top":oT}); return this; }};$.fn.Panel = function(op){ "use strict"; return new iPanel(this, op);}; |
|
1
2
3
4
5
6
7
8
|
.panel_outer{ width:100%; height:100%; overflow:hidden; position:absolute; left:0px; top:0px; border:none; margin:0px; padding:0px;}.panel_inner{position:absolute; overflow:auto; margin:0px; padding:0px;}.panel {position:absolute; overflow:hidden; z-index:10;} |
パネルライブラリ説明
定義
$(メインパネルオブジェクト).Panel({
panel:[
{
id:(id),
position:(“top”|”bottom”|”left”|”right”),
(width:(幅)|height:(高さ))
}, …
]
});
パネル定義は複数可能
関数
fit() : パネルのレイアウトを現在の画面から再計算する。
記述例
var _Panel = $("#pM").Panel({panel:[ {id:"pT", position:"top"}, {id:"pB", position:"bottom"}, {id:"pL", position:"left", width:180}, {id:"pR", position:"right", width:180} ]});コンストラクト時に、各パネルの基本情報を、各パネル毎の変数に格納しています。
左右パネルは、指定された幅を変数widthに、上下パネルは、指定された高さを、変数heightに格納しています。(55-60行目)
変数zは、パネルの非表示から表示に戻す場合の、前回の記憶値です。この段階では利用していません。
また、変数 pl, pr, pt, pbは、パディング値です。
fit関数が、今回のポイントとなる、パネル配置計算をしている部分です。(66-100行)
最初にパネルを配置する全領域の幅と高さを変数に代入します。(68-69行)
次に、サイドパネルを順番に配置します。(71-97行)
最後に、中央にメインパネルを配置します。(95-96行)
ブラウザの拡縮時には、パネルのfit関数を呼び出すことで、その時点の画面にあったパネルにフィットします。
今回のサンプルでいうと、パネル配置HTML(23-26行目)で実現しています。
2.3 パネルライブラリ – リサイズハンドル追加など
2.2で、パネルライブラリの骨格ができました。あとは、パネルのリサイズ機能をつけます。
リサイズ機能は、パネル境界線にマウスをもっていくと、ドラッグ＆ドロップでパネルの大きさを変更することです。
下図ではわかりませが、メインパネルと左右パネルの境界線にマウスをもっていくと、パネルの大きさを変えることができます。
図2.3.1 パネル配置の仕上げ確認サンプル
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content="HTML,javascript,jQuery,css"><meta name="format-detection" content="telephone=no,address=no,email=no"><meta name="viewport" content="width=device-width,initial-scale=1"><link href="iPanel03.css" rel="stylesheet" /><link href="/js/iquery-ui.css" rel="stylesheet" /><script src="/js/jquery.js"></script><script src="/js/jquery-ui.js"></script><script src="/js/iResizer.js"></script><script src="iPanel03.js"></script><title>fine-frontier</title><script>$(function(){ var _Panel, _funFit, _resize; _Panel = $("#pM").Panel({panel:[ {id:"pT", position:"top"}, {id:"pB", position:"bottom"}, {id:"pL", position:"left", width:180, resize:true}, {id:"pR", position:"right", width:180, resize:true} ]}); _funFit = function(){ _Panel.fit(); } _resize = new iResizer(_funFit);})</script></head><body><div id="pM">Main Panel</div><div id="pB" style="background:#ccc;">Copyright 2017-2018 fine-frontier License.</div><div id="pT" style="background:#fca;">TOP</div><div id="pL" style="background:#aca;">Left</div><div id="pR" style="background:#9ac;">Right</div></body></html> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
|
var iPanel = function(obj, op){ "use strict"; this.id = obj.attr("id"); this.hw = 6; // handle width px (0 - 100) this.bw = 0; // border width px (0 - 20) this.bc = "#000"; // border color this._f_ = []; // CallBackFunctions this.nPanel = 0; // panel number this.panel = []; // panel def this.iPanel(op); // Call Constructor op = null; return this;};iPanel.prototype={ iPanel:function(op){ "use strict"; var nW, nH, pos, id, i, n, s, vThis; vThis = this; if(op.borderColor!==undefined){ this.bc = op.borderColor; } if(op.borderWidth!==undefined){ s = op.borderWidth; if(typeof s==="string"){ this.bw = s.replace(/¥D/g,'')-0; }else{ this.bw = s - 0; } if(this.bw<0){ this.bw = 0; }else if(this.bw>10){ this.bw = 10; } } if(op.handleWidth!==undefined){ s = op.handleWidth; if(typeof s==="string"){ this.hw = s.replace(/¥D/g,'')-0; }else{ this.hw = s - 0; } } $("#"+this.id).addClass("panel_inner").css({"border":"none","margin":0}) .wrap("<div id='"+this.id+"_outer' class='panel_outer' style='visibility:hidden' />") .wrap("<div id='wrap_"+this.id+"' class='panel' />"); s = $("#"+this.id).css("paddingLeft"); if(s===undefined){ this.pl = 0; }else{ this.pl = s.replace(/[^¥d¥.]/g,"")-0; } s = $("#"+this.id).css("paddingRight"); if(s===undefined){ this.pr = 0; }else{ this.pr = s.replace(/[^¥d¥.]/g,"")-0; } s = $("#"+this.id).css("paddingTop"); if(s===undefined){ this.pt = 0; }else{ this.pt = s.replace(/[^¥d¥.]/g,"")-0; } s = $("#"+this.id).css("paddingBottom"); if(s===undefined){ this.pb = 0; }else{ this.pb = s.replace(/[^¥d¥.]/g,"")-0; } if(this.bw!==undefined){ $("#"+this.id+"_outer").css({"background":this.bc}); } this.nPanel = op.panel.length; // panel number for(i=0; i<this.nPanel; i++){ this.panel[i] = op.panel[i]; id = this.panel[i].id; pos = this.panel[i].position.toLowerCase(); if(pos!=="left" && pos!=="right" && pos!=="bottom"){ pos = "top"; } this.panel[i].position = pos; $("#"+id).css({"float":"left","display":"brock","top":0,"left":0,"border":"none","margin":0}) .appendTo("#"+this.id+"_outer"); $("#"+id).wrap("<div id='wrap_"+id+"' class='panel panel-"+pos+"' />"); s = $("#"+id).css("paddingLeft"); if(s===undefined){ this.panel[i].pl = 0; }else{ this.panel[i].pl = s.replace(/[^¥d¥.]/g,"")-0; } s = $("#"+id).css("paddingRight"); if(s===undefined){ this.panel[i].pr = 0; }else{ this.panel[i].pr = s.replace(/[^¥d¥.]/g,"")-0; } s = $("#"+id).css("paddingTop"); if(s===undefined){ this.panel[i].pt = 0; }else{ this.panel[i].pt = s.replace(/[^¥d¥.]/g,"")-0; } s = $("#"+id).css("paddingBottom"); if(s===undefined){ this.panel[i].pb = 0; }else{ this.panel[i].pb = s.replace(/[^¥d¥.]/g,"")-0; } nW = this.panel[i].width; if(nW!==undefined){ nW-=0; }else{ nW = $("#"+id).width(); } if(nW<=this.hw){nW=this.hw;} nH = this.panel[i].height; if(nH!==undefined){ nH-=0; }else{ nH = $("#"+id).height(); } if(nH<=this.hw){nH=this.hw;} if(pos==="left" || pos==="right"){ this.panel[i].z = this.panel[i].width = nW; if(this.panel[i].resize){ s = "<div id='handle_"+id+"' name='handle_"+i+ "' class='panel_handle panel_handle_ew' style='width:"+ this.hw+"px;height:100%;left:0px;top:0px;' />"; $("#"+this.id+"_outer").append(s); } }else{ this.panel[i].z = this.panel[i].height = nH; if(this.panel[i].resize){ s = "<div id='handle_"+id+"' name='handle_"+i+ "' class='panel_handle panel_handle_ns' style='width:100%;height:" +this.hw+"px;left:0px;bottom:0px;' />"; $("#"+this.id+"_outer").append(s); } } } $("#"+this.id+"_outer>div.panel_handle") .mouseenter(function(){$(this).addClass("ui-state-hover");}) .mouseleave(function(){$(this).removeClass("ui-state-hover");}); $("#"+this.id+"_outer > div.panel_handle_ew") .draggable({ axis: "x", start: function(){ n = $(this).css("left").replace(/[^¥d¥.]/g,"")-0; }, stop: function(){ n = $(this).css("left").replace(/[^¥d¥.]/g,"")-n; i = $(this).attr("name").replace(/¥D/g,"")-0; if(vThis.panel[i].position==="left"){ vThis.panel[i].width += n; }else{ vThis.panel[i].width -= n; } if(vThis.panel[i].width<vThis.hw){ vThis.panel[i].width = 0; }else{ vThis.panel[i].z = vThis.panel[i].width; } vThis.fit(); } }) .dblclick(function() { i = $(this).attr("name").replace(/¥D/g,"")-0; if(vThis.panel[i].width===0){ vThis.panel[i].width = vThis.panel[i].z; }else{ vThis.panel[i].width = 0; } vThis.fit(); }); $("#"+this.id+"_outer > div.panel_handle_ns") .draggable({ axis: "y", start: function(){ n = $(this).css("top").replace(/[^¥d¥.]/g,"")-0; }, stop: function(){ n = $(this).css("top").replace(/[^¥d¥.]/g,"")-n; i = $(this).attr("name").replace(/¥D/g,"")-0; if(vThis.panel[i].position==="top"){ vThis.panel[i].height += n; }else{ vThis.panel[i].height -= n; } if(vThis.panel[i].height<vThis.hw){ vThis.panel[i].height = 0; }else{ vThis.panel[i].z = vThis.panel[i].height; } vThis.fit(); } }) .dblclick(function() { i = $(this).attr("name").replace(/¥D/g,"")-0; if(vThis.panel[i].height===0){ vThis.panel[i].height = vThis.panel[i].z; }else{ vThis.panel[i].height = 0; } vThis.fit(); }); this.fit(); $("#"+this.id+"_outer").css('visibility',''); return this; }, fit:function(){ "use strict"; var oW = $("#"+this.id+"_outer").width() - this.bw * 2; var oH = $("#"+this.id+"_outer").height() - this.bw * 2; var oL = this.bw, oR = this.bw, oT = this.bw, oB = this.bw, n = 0, pos, id, v, i; for(i=0; i<this.nPanel; i++){ id = this.panel[i].id; pos = this.panel[i].position; v = $("#handle_"+id); if(pos==="left"){ n = this.panel[i].width; if(n<=this.hw){ n = 0; $("#"+id).hide(); }else{ if(n>=oW){ n = oW; this.panel[i].width = n; } if(n!==0 && $("#"+id).css("display")==="none"){ $("#"+id).show(); } } $("#wrap_"+id).css({"width":n,"height":oH,"left":oL,"top":oT}); $("#"+id).css({"width":n-this.bw,"height":oH,"left":0,"top":0}); if(v.length===1){ v.css({"width":this.hw,"height":oH,"left":oL+n-this.hw/2,"top":oT}); } oL += (n+this.bw); oW -= (n+this.bw); }else if(pos==="right"){ n = this.panel[i].width; if(n<=this.hw){ n = 0; $("#"+id).hide(); }else{ if(n>=oW){ n = oW; this.panel[i].width = n; } if(n!==0 && $("#"+id).css("display")==="none"){ $("#"+id).show(); } } $("#wrap_"+id).css({"width":n,"height":oH,"right":oR,"top":oT}); $("#"+id).css({"width":n-this.bw,"height":oH,"left":this.bw,"top":0}); if(v.length===1){ v.css({"width":this.hw,"height":oH,"right":(oR+n-this.hw/2),"top":oT,left:''}); } oR += (n+this.bw); oW -= (n+this.bw); }else if(pos==="bottom"){ n = this.panel[i].height; if(n<=this.hw){ $("#"+id).hide(); }else{ if(n>=oH){ n = oH; this.panel[i].height = n; } if($("#"+id).css("display")==="none"){ $("#"+id).show(); } } $("#wrap_"+id).css({"width":oW,"height":n,"left":oL,"bottom":oB}); $("#"+id).css({"width":oW,"height":n-this.bw,"left":0,"top":this.bw}); if(v.length===1){ v.css({"width":oW,"height":this.hW,"left":oL,"bottom":oB+n-this.hw/2}); v.css("top",''); } oB += (n+this.bw); oH -= (n+this.bw); }else{ n = this.panel[i].height; if(n<=this.hw){ $("#"+id).hide(); }else{ if(n>=oH){ n = oH; this.panel[i].height = n; } if($("#"+id).css("display")==="none"){ $("#"+id).show(); } } $("#wrap_"+id).css({"width":oW,"height":n,"left":oL,"top":oT}); $("#"+id).css({"width":oW,"height":n-this.bw,"left":0,"top":0}); if(v.length===1){ v.css({"width":oW,"height":this.hW,"left":oL,"top":oT+n-this.hw/2}); } oT += (n+this.bw); oH -= (n+this.bw); } $("#"+id).width($("#wrap_"+id).width()-(this.panel[i].pl+this.panel[i].pr)) .height($("#wrap_"+id).height()-(this.panel[i].pt+this.panel[i].pb)); } $("#wrap_"+this.id).css({"width":oW,"height":oH,"left":oL,"top":oT}); $("#"+this.id).css({"width":oW-(this.pl+this.pr),"height":oH-(this.pt+this.pb)}); for(i=0; i<this._f_.length; i++){ (this._f_[i])(); } return this; }, getHandleWidth:function(){ "use strict"; return this.hw; }, setHanleWidth:function(hw){ "use strict"; if(hw!==undefined && hw!==null){ if(typeof hw==="string"){ hw = hw.replace(/¥D/g,'')-0; }else{ hw = hw-0; } if(hw>0 && hw<100){ this.hw = hw; for(var i=0; i<this.nPanel; i++){ if(this.panel[i].position==="top" || this.panel[i].position==="bottom"){ $("#handle_"+this.panel[i].id).height(hw); }else{ $("#handle_"+this.panel[i].id).width(hw); } } this.fit(); } } return this; }, getBorderWidth:function(){ "use strict"; return this.bw; }, setBorderWidth:function(x){ "use strict"; if(x!==undefined && x!==null){ if(typeof x==="string"){ x = x.replace(/¥D/g,'')-0; }else{ x = x-0; } if(x>=0 && x<=10){ this.bw = x; this.fit(); } } return this; }, getBorderColor:function(){ "use strict"; return this.bc; }, setBorderColor:function(x){ "use strict"; this.bc = x; $("#"+this.id+"_outer").css({"background":this.bc}); return this; }, show:function(id){ "use strict"; if(id===null || id===undefined){ $("#"+this.id+"_outer").css('visibility','visible'); }else{ for(var i=0; i<this.nPanel; i++){ if(this.panel[i].id===id){ if(this.panel[i].position==="left" || this.panel[i].position==="right"){ this.panel[i].width = this.panel[i].z; }else{ this.panel[i].height = this.panel[i].z; } this.fit(); break; } } } return this; }, hide:function(id){ "use strict"; if(id===null || id===undefined){ $("#"+this.id+"_outer").css('visibility','hidden'); }else{ for(var i=0; i<this.nPanel; i++){ if(this.panel[i].id===id){ this.panel[i].width = this.panel[i].height = 0; this.fit(); break; } } } return this; }, setCallbackFun:function(f){ "use strict"; if(f===null || typeof f!=="function"){return this;} var i, j; j = this._f_.length; for(i=0; i<j; i++){ if(this._f_[i]===f){break;} } if(i==j){ this._f_[i] = f; } return this; }};$.fn.Panel = function(op){ "use strict"; return new iPanel(this, op);}; |
|
1
2
3
4
5
6
7
8
9
10
|
.panel_outer{ width:100%; height:100%; overflow:hidden; background-color:#000; position:absolute; left:0px; top:0px; border:none; margin:0px; padding:0px;}.panel_inner{position:absolute; overflow:auto; margin:0px; padding:0px; border:none; background-color:#fff;}.panel {position:absolute; overflow:hidden; z-index:10; border:none; background-color:#000;}.panel_handle {position:absolute; z-index:100000000;}.panel_handle_ew{cursor:e-resize;}.panel_handle_ns{cursor:n-resize;} |
更新日付:2018/03/04 11:57:15