• 締切済み

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

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

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

回答がないみたいなので… 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>

kahata
質問者

お礼

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

kahata
質問者

補足

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptの動的読み込みについて教えてください

    javascriptの動的読み込みについて教えてください いつもお世話になります。 jqueryを勉強中のものです。 少しややこしいのですが、 以下のmenu.htmlとmain.htmlを持ったframe.htmlで、メニューの試験ボタンを押してmain.htmlの<div id="target_id">にload.htmlを動的に読み込んだ時、loadされたhelloボタンが作動しません。 menu.htmlのtest()中のalert(data);でload.htmlの<script>が読み込まれていることは確認できるのですが・・何が原因でどこが悪いのでしょうか？ よろしくご指導お願いします。 frame.html ----------------------------------------------------------- <html> <head> <title>Dynamic Load Test</title> </head> <frameset name="frame" cols="180,*"> <frame name="menu" src="menu.html"> <frame name="MainPanel" src="main.html"> </frameset> </html> ----------------------------------------------------------- menu.html ----------------------------------------------------------- <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"><!-- function test(){ jQuery.get("./load.html",function(data){ alert(data); $("#target_id",window.parent.MainPanel.document).html(data); }); } // --></script> </head> <body> <button onClick="test();">試験</button> </body> </html> ----------------------------------------------------------- main.html ----------------------------------------------------------- <html> <head> </head> <body> <h1>main.html</h1> </body> <div id="target_id"></div> </html> ----------------------------------------------------------- load.html ----------------------------------------------------------- <h1>load.html</h1> <script type="text/javascript"><!-- function hello(){ alert("こんにちわ"); } // --></script> <button onClick="hello();">hello</button> -----------------------------------------------------------

  • javascriptについて教えてください。

    divのボタンを作りたいと思い、調べながらjQueryを使う方法は以下のようにしたらいい事は分かったのですが、jQueryを使わずにしようと思い $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); の部分を document.getElementsByTagName("div").onclick = function(){ var x = this.id; 　alert(x); }; としてみたのですが、うまくいきません。jQueryを使わずに同じようなボタンを作るにはどうしたらいいのでしょうか？ <!doctype html> <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); </script> </head> <body> <div id="aaa" class="div_link">a</div> <div id="bbb" class="div_link">b</div> <div id="ccc" class="div_link">c</div> <div id="ddd" class="div_link">d</div> <div id="eee" class="div_link">e</div> </body> </html>

  • jqueryとjavascriptの競合？

    どなたかお知恵をお貸しくださいませ。 jqueryとjavascriptを混在させたページを作っています。 ファイルは全て同一サーバー内です。 ◆希望ページ構成 <body> <div class="wrap"> 　<div class="header"></div> 　<div class="main">**フロートで左に配置 　　<iframe></iframe> 　</div> 　　//１． 　　//jqueryの「iframe-auto-height」プラグインを使って、 　　//読み込まれた内容に応じてiframeの高さを変えるようにしたい。 　<div class="menu">**フロートで右に配置</div> 　　//２． 　　//jqueryの「portamento」プラグインを使って、 　　//画面が縦長になりスクロールしてもこの「メニュー」が 　　//画面に追従してフロートするように（常に画面上に現れている様に）したい。 　　//３． 　　//このメニュー内のリンクから「iframe」内の内容を切り替えたい。 </div> </body> ■　「１．」「２．」のjqueryは、同時にちゃんと動作しました。 　　が、「３．」を加えると「１．」が動きません。 　　「２．」は常に正常に動作します。 　　「１．」と「３．」が競合しているようなのですが、 　　私はみなさんが提供してくださっているスクリプトを“切り貼り”して 　　使わせて頂いている程度の知識しかなく、この問題をどうすれば回避し、 　　希望のページを作れるのか分からず、どなたかお詳しい方にご教示頂ければ、と思った次第です。 　★「３．フロートするメニューボックスの中のリンクから、 　　　表示する内容に応じて高さが可変するiframeの内容を切り替える」 　　　にはどのようにすればよいでしょうか？ ◆HTML記述 <head> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript" src="jquery.iframe-auto-height.plugin.1.5.0.min.js"></script> ///　１．「iframe-auto-height」用。これは<head>内だけでなく、</body>の前部分に置いても動作しました。 <script type="text/javascript"> <!-- function ifr(jpURL){ panel.location = jpURL; } // --> </script> 　///３．「リンクでiframe内を切り替える」用。 </head> <body> ～ ～ <iframe src=".html" name="panel" width="620" height="1500" class="auto-height" scrolling="no" frameborder="0"></iframe> 　///　『切り替え』用に「name」を付け、『autoheight』用に「class」を付けています。 　///　フロートの確認用に便宜的に「height」を書いていますが、『autoheight』が動作する際 　///　は「height」は無視されています。 <script type="text/javascript"> jQuery('iframe').iframeAutoHeight(); </script> 　///　『autoheight』用スクリプト ～ ～ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="http://portamento.js"></script> <script> $('#menu').portamento({gap: 100}); // set a 100px gap rather than the default 10px </script> 　///　『フロートボックス』用読み込み＆スクリプト 　　　　 </body> 内容は以上となります。 何卒よろしくお願いいたします。

  • JavaScriptでウィンドウを操作する方法

    "index.html"は水平方向に２分割のフレーム構成で、それぞれ「menu」「body」というnameがついています。 いま、「body」側のsrc"body1.html"にJavaScriptのソースを書いているのですが、"body1.html"中のある文字列をクリックしたら (1)新しいページ「new.html」が別ウィンドウで開く。 (2)もとの「body」側のページが"body2.html"に遷移する（フレームは解除しない）。 上記２つの処理が一度に出来るスクリプトを書きたいのです。 window.open()で(1)を書いてしまうと、(2)の分の処理がうまく動きません。 どなたか教えていただけないでしょうか？？

  • EXCELデータベースからjavascript表示

    EXCELデータベースからjavascript表示 質問と選択肢、答えの番号をあらかじめEXCELに保存しておいてそれをデータベース接続して HTMLの画面に表示させる機能の追加です。 現在はソースコードに直接記述している部分をEXCELのワークシートからデータを取得してくる機能がほしいです。」 この方法だとプログラミングに詳しくない人でもソースコードを直接触らずにEXCELのワークシートを編集すれば済むと思います。 サンプルコード index.html ------------------------------ <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSVファイルを使用した表・グラフ</title> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.csv2table-0.02-b-4.3.js" type="text/javascript" charset="utf-8"></script> <script> $(function(){ $('#table').csv2table('media/dete_2.csv'); }); </script> </head> <body> <h1><img src="images/logo.png" width="487" height="180" alt="CSVファイルを使用した表・グラフ"></h1> <div id="table"></div> </body> </html> --------------------------------https://ccchart.com/lib/jquery/plugin/csv2table/v002/test.htm jquery.csv2table-0.02-b-4.4.jshttps://ccchart.com/lib/jquery/plugin/csv2table/v002/js/jquery.csv2table-0.02-b-4.4.js AsarKingChangさんお願いします。 よろしくお願いします。GWは終わりました。めいいっぱい楽しめましたでしょうか？　また遊んでください。よろしくお願いします。

  • javascript

    javascript全くの初心者です。 CLASSに与えた値を条件によって変更することは出来ますか、色々やってみましたが出来ません。以下の例では男を女に変えたいのですが、ご面倒お掛けしますが宜しくお願い致します。 <html> <head> <title>sample</title> <div class = "test">男</div> </head> <script type="text/javascript"> function delAttr() { 　test= "女"; } </script> <body> <script type="text/javascript"> if test = "女" delAttr(); </script> </body> </html>

  • JavaScriptでアコーディオンメニューを作る

    こちらでよくお世話になっています。 JavaScriptに詳しい方、どうか教えてください。 当方、まだまだJavaScriptは初心者です。 以下のようなHTMLがあって、 コンテンツ部分を普段は非表示で タイトル部分をクリックしたら、 その下の表示・非表示が切り替わるようにしたいと考えています。 （アコーディオンの感じです。） ------------------------- <div id="title1">タイトル1</div> <table id="contents1"> 　<tr><td>コンテンツ1</td></tr> </table> <div id="title2">タイトル2</div> <table id="contents2"> 　<tr><td>コンテンツ2</td></tr> </table> <div id="title3">タイトル3</div> <table id="contents3"> 　<tr><td>コンテンツ3</td></tr> </table> ちなみに、それぞれタイトルとコンテンツがセットになっていて、 titleのid名の末尾の番号と そこをクリックしたら、開閉するtableのid名の末尾の番号を一致させています。 ※このタイトルとコンテンツは動的に増えたり減ったりします。 プラグインを入れないで 自分でjavascriptを組みたいと考えているのですが どのようにすればよいのか、分からず こちらで質問をさせていただきました。 var divList = document.getElementsByTagName('div'); for(i=0; i<divList.length; i++){ } のようにやっていくのだろうとは思うのですが for文の中をどのように書いたらよいかを ご教授いただけたら助かります。 どうぞ宜しくお願いいたします。

  • jQueryとprototypeの共存

    prototype.jsとjQuery.js、そのプラグインであるjquery.cycle.all.pack.jsを共存させ、データベースから取り出した画像にエフェクトをかけて表示したいと思っています。 ライブラリの共存には'jQuery.noConflict();'を使うところまでは調べたのですが、その使い方がよくわかりません。現在は以下のようにプログラムを書いていますが、jqueryの効果が出ていません。使い方、描き方の間違い等ありましたらご指摘お願いいたします。 <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.pack.js"></script> <script type="text/javascript"> <!-- jQuery.noConflict(); function loadHello(){ new Ajax.Request( './php/Search2.php', { onComplete : function( httpObj ){ $('検索結果表示領域').innerHTML = httpObj.responseText; } } );} jQuery(function() { 　　　　jQuery(".sample").cycle( { fx:'shuffle', delay: -2000 }); }); // --></script> </head> <body onLoad="loadHello()"> <ul id="sample"> <div id="検索結果表示領域"></div> </ul> </body> </html>

  • JavaScriptでHTMLを表示させる方法

    cgiのチャットを使用しております。 古いチャットのため、フレーム対応となっています。 <frameset cols="83%,*"> <frame src="./form.htm" name="chat_form" marginwidth="10" marginheight="10" scrolling="auto"> <frame src="./rom.htm" name="chat_rom" marginwidth="10" marginheight="10" scrolling="auto"> </frameset> <frame src="./chat.htm" name="chat_main" marginwidth="10" marginheight="10" scrolling="auto"> <noframes> <BODY bgcolor="#FFFFFF" text="#666666"> <CENTER> <H2>このチャットはフレーム対応のブラウザでご利用ください</H2> </CENTER> </BODY> </noframes> </frameset> </html> これをフレームを無くすようにしたいのですが、CGIプログラムのため、修正は難しいのです。 JavaScriptでどのように表示できるのでしょうか？document.writeとか…調べても分からなかったのでした。 例 <div> <script type="text/javascript"> ???("○○.html"); </script> </div> 宜しくお願いします。

  • ドラッグによるスライド移動をさせない方法(safari/chrome)

    お世話になります。 早速ですが質問させていただきます。 jQuery1.3.2とEasySlider1.7プラグインを使っています。 EasySliderを使ったスライドの中にテキストボックスを配置しているのですが、 このテキストボックスでドラッグしてスライドの領域外へ移動させると 次のスライドへ移動してしまいます。 （safari と google chrome のみ） これを移動させないよう固定する方法はありませんでしょうか？ 以下にソースコードを載せておきます。 ------------------------------------------------------- <html> 　<head> 　　<title>Easy Slider TEST</title> 　　<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script> 　　<script type="text/javascript" src="lib/jquery/easySlider1.7.js"></script> 　　<script type="text/javascript"> 　　　$(document).ready(function(){ 　　　　$("#slider").easySlider(); 　　　}); 　　</script> 　　<style type="text/css"> 　　　#slider{} 　　　#slider ul{ 　　　　list-style-type:none; 　　　　margin:0px; 　　　　padding:0px; 　　　} 　　　#slider ul li{ 　　　　height:100px; 　　　　width:300px; 　　　} 　　</style> 　</head> 　<body> 　　<div id="slider"> 　　　<ul> 　　　　<li><div style="height:100%; background-color:#aaa;"> 　　　　　<input type="text" name="text" value="slide-1" /> 　　　　</div></li> 　　　　<li><div style="height:100%; background-color:#bbb;">slide-2</div></li> 　　　　<li><div style="height:100%; background-color:#ccc;">slide-3</div></li> 　　　</ul> 　　</div> 　</body> </html> ------------------------------------------------------- ■jQuery1.3.2■ http://docs.jquery.com/Release:jQuery_1.3.2 ■EasySlider1.7■ http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider 以上、よろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する