JavaScriptでスプリットウインドウ

締切済

質問者：kahata
質問日時：2009/09/21 15:59
回答数：1件

お世話になります。
ある事情でhtmlの<frame>が使えないのでJavaScriptでこの機能を実現したいと思います。
すなわち、<body>を<div>または<table>で左右(上下)に分割して境界線をドラッグして領域の幅(高さ)を自由に変更したいのですが、どうすればよいかよくわかりません。web検索しましたが例が見つかりませんでした。適当なexampleがあればご紹介よろしくお願いします。
jqueryを使い慣れているのでjqueryのプラグインか何かの例があればありがたいのですが、そうでなくての結構です。特に限定しません。よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： fujillin
回答日時：2009/09/28 18:10

回答がないみたいなので…

jqueryはよく知らないけど、基本的にはカーソルの位置を取得して、ドラッグ量に応じてdivなどのサイズを変更してあげればできると思う。

jquery知らないけど、とりあえずのサンプルとして適当に作成してみた。
イベント発生元の取得方法がわからないので、jquery的でない書き方になっている。あと、クロスブラウザもあやしいかも。（ＩE6で動作確認）
そのへんは適宜修正してください。

サンプルなので、<div>の高さ方向の変更のみです。
<html>
<head>
<style type="text/css">
#div1 { width:600px; height:300px;
background-color:yellow; overflow:hidden; }
#div2 { width:600px; height:300px;
background-color:azure; overflow:hidden; }
</style>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var udf = false, mvf = false;
$(function() {
$("body").mousedown(function() {udf = true;});
$("body").mouseup(function() {udf = false;});
$("body").mousemove(test);
});
function test(evt) {
var tmp = evt?evt.target.id:event.srcElement.id;
var f = (tmp == 'div1' || tmp == 'div2');
tmp = evt?evt.clientY:event.clientY;
var d = tmp - $("#div2").offset().top;
if (f && udf && mvf) {
var h1 = $("#div1").height() + d;
var h2 = $("#div1").height() + $("#div2").height() - h1;
if (h1>0 && h2>0) {
$("#div1").height(h1); $("#div2").height(h2); d = 0;
}
}
mvf = (f && Math.abs(d)<6);
$("body").css("cursor",mvf?'row-resize':'auto');
}
</script>
</head>
<body name="bdy">
<div id="div1">a</div>
<div id="div2">b</div>
</body>
</html>

この回答への補足

もっとよいjqueryのプラグインを見つけました。
以下のサイトです。
http://layout.jquery-dev.net/demos.html

補足日時：2009/10/01 06:33

通報する

- 0
- 件

通報する

この回答へのお礼

労作をどうもありがとうございます。
その後私もいろいろ探しまして、jqueryプラグインでsplitterを見つけました。
以下のJqueryサイトからTry out a demonstrationをクリックするとデモが表示されます。
http://plugins.jquery.com/project/IngenySplitter
ありがとうございます

通報する

お礼日時：2009/09/28 19:33

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！