- 締切済み
JavaScriptでスプリットウインドウ
お世話になります。 ある事情でhtmlの<frame>が使えないのでJavaScriptでこの機能を実現したいと思います。 すなわち、<body>を<div>または<table>で左右(上下)に分割して境界線をドラッグして領域の幅(高さ)を自由に変更したいのですが、どうすればよいかよくわかりません。web検索しましたが例が見つかりませんでした。適当なexampleがあればご紹介よろしくお願いします。 jqueryを使い慣れているのでjqueryのプラグインか何かの例があればありがたいのですが、そうでなくての結構です。特に限定しません。よろしくお願いします。
- kahata
- お礼率39% (66/168)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
回答がないみたいなので… 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プラグインでsplitterを見つけました。 以下のJqueryサイトからTry out a demonstrationをクリックするとデモが表示されます。 http://plugins.jquery.com/project/IngenySplitter ありがとうございます
補足
もっとよいjqueryのプラグインを見つけました。 以下のサイトです。 http://layout.jquery-dev.net/demos.html