2007/11/17(Sat) 02:26:40 編集(投稿者)
<pre><pre>> どうしても、ってなら、MSDN-OnLine のように、メニューとコンテンツをテーブルか div で囲って、
> グリップバーを自前で用意してあげる
このスクリプトは結構めんどくさいな。以前作ったことがあるけどイベント一杯使うからね。
こんな感じ。
マウスを高速に動かすとバーから外れてしまい、バーの移動が止まってしまうので、外れた時の工夫が
ちょいと必要だけど。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>GripBarSample</TITLE>
<script>
var gripOn = false;
var shadow = null;
function init() {
var grip = document.getElementById("gripBar");
grip.onmousedown = function() {
gripOn = true;
var o = event.srcElement;
shadow = o.cloneNode(true);
shadow.style.filter = "alpha(opacity=50)";
shadow.style.position = "absolute";
shadow.style.zIndex = 100;
window.status = o.offsetTop + "::" + o.offsetLeft + "::" + o.offsetHeight + "::" +o.offsetWidth;
shadow.style.top = o.offsetTop + "px";
shadow.style.left = o.offsetLeft + "px";
document.body.appendChild(shadow);
document.body.style.cursor = "wait";
shadow.onmousemove = function() {
if (gripOn) {
if (shadow) {
shadow.style.left = (event.x-10) + "px";
}
}
};
shadow.onmouseup = function() {
gripOn = false;
shadow.removeNode();
document.body.style.cursor = "default";
};
};
}
window.onload = function() {
init();
}
</script>
<style>
#mainFrame {
margin:0px;
width:100%;
height:100%;
border:solid 4px red;
background-color:pink;
}
#leftContent {
margin:0px;
width:35%;
height:90%;
border:solid 2px lime;
background-color:tomato;
float:left;
}
#rightContent {
margin:0px;
width:100%;
height:90%;
border:dotted 2px yellow;
background-color:snow;
clear:none;
}
#gripBar {
margin:0px;
width:20px;
height:90%;
border:outset 2px blue;
background-color:orange;
float:left;
}
</style>
</HEAD>
<BODY style="margin:0px">
<div id="mainFrame">
<div id="leftContent"></div>
<div id="gripBar"></div>
<div id="rightContent"></div>
</div>
</BODY>
</HTML>
追記：
色変更はこれで問題なし。幅を細くするのも問題なし。幅を細くすると、右コンテンツ枠がその分広がる。
マウスドラッグ＆リリース時のグリップバーの左位置から、全体の横幅から何％の位置にあるのかを割り出し
て左コンテンツにその値を設定してあげればOK。
左コンテンツだけでOK。なぜかっていうと、float 指定しているから。
がんばって下さい。
# 砂時計にしているのは、マウスドラッグは基本的に範囲選択なので、それを防ぐため。MSDN もドラッグ中
# は砂時計になっていますね。
</pre></pre>