jqueryレイアウトを使用してアプリケーションの一部をドッキングおよびドッキング解除するには

Question

私はこれを長い間研究してきましたが、このトピックはコーディングの世界では非常に過小評価されているようです。私は、自分のアプリケーションでjQueryのレイアウトUIを使用して

http://layout.jquery-dev.com/

そして、我々は唯一の南とセンターペインを持っています。私は、devtoolsがブラウザの底からどのようにドッキングして、独自のウィンドウになるかと同様に、Southペインを「ドッキング解除」できるようにしたいと考えています。すなわち

私はそこに利用可能なコードから任意のヒントを得ることができるかどうかを確認するためにデベロッパーツールを検査しようとしたが、有益な何かを見つけることができませんでした。誰かがこれがどのように達成されるか、あるいは私が何とか見逃しているかもしれないオンラインのどこにでもコード例があれば、アイデアを持っていますか？もう一度、私のアプリケーションはjqueryのレイアウトUIを使用しています。南の領域は、「ドッキング解除」してドッキングバックできます。

Answer 1

単にそれを "ドッキング解除" する方法はありません。ドッキング解除したいものを表示する別のページを作成する必要があります。

次に、（JavaScriptを使用して）ページの下部を削除した後、削除した部分（別のページ）を含むポップアップを開くボタンを作成します。

ポップアップブロッカーがブロックする可能性はありますが、作成するのは難しくありません。 Devtoolsはブラウザの一部なので、ポップアップブロッカーの影響を受けません。私たちはそれで "底部" と赤い底のdivを持っている。この場合https://jsfiddle.net/Loveu79d/

$("#popout").click(function() { 
 
    $(".bottom").hide(); // You could also use jquery to remove the div from the DOM 
 
    $(".top").addClass("fillpage"); // Add a class to the top div to stretch it to 100% height 
 
    window.open("http://www.google.com", "popupWindow", "width=800,height=400,scrollbars=no"); // Use this to open your other page that has the same content as the bottom div 
 
});

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.top { 
 
    border-bottom: 1px solid #000; 
 
} 
 

 
.top, .bottom { 
 
    height: 49%; 
 
} 
 

 
.fillpage { 
 
    height: 100%; 
 
} 
 

 
.bottom { 
 
    color: #FFF; 
 
    background: #FF0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="top"> 
 
    <h1>Top part</h1> 
 
    <button id="popout">Open popup</button> 
 
</div> 
 

 
<div class="bottom"> 
 
    <h1>Bottom part</h1> 
 
</div>

：

はここで働いてjsFiddleです。たとえば、 "bottom.html"のように、そのコンテンツだけを含む別のページを作成する必要があります。その後、私のコードを取って、そのページをJavascriptの "http://www.google.com"という部分に置きます。

ページの下部に編集済みのコンテンツが含まれている場合は、Cookieまたはデータベースを使用してこれらの変更を保存し、bottom.htmlページに読み込む必要があります。