0

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

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

そして、南と中央のペインしかありません。開発ツールがブラウザーの下部からドッキングを解除して独自のウィンドウになる方法と同様に、南ペインを「ドッキング解除」できるようにしたいと考えています。すなわち

ドッキング領域のあるブラウザ ウィンドウ ドッキング解除をクリック

ドッキングされていない別のウィンドウ

ドッキング ウィンドウのないブラウザ ウィンドウ

devTools を調べて、そこにある利用可能なコードからヒントを得ることができるかどうかを確認しようとしましたが、有用なものを見つけることができませんでした。これをどのように達成できるかについてのアイデアはありますか、またはオンラインのどこかにコード例があり、何らかの形で見逃した可能性がありますか? 繰り返しますが、私のアプリケーションは jquery レイアウト UI を使用しており、「ドッキング解除」してドッキングできるようにしたい南部リージョンを使用しています。

レイアウトテンプレートの例

4

1 に答える 1

1

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

次に、(Javascript を使用して) 最初にページの下部を削除し、削除した部分 (別のページ) を含むポップアップを開くボタンを作成します。

作成するのはそれほど難しくありませんが、ポップアップ ブロッカーによってブロックされる可能性があることに注意してください。Devtools はブラウザーの一部であるため、ポップアップ ブロッカーの影響を受けません。

動作中の jsFiddle は次のとおりです: 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>

この場合、「Bottom part」を含む赤い下部 div があります。「bottom.html」など、そのコンテンツのみを含む別のページを作成する必要があります。次に、私のコードを取得し、そのページを「http://www.google.com」と表示されている Javascript 部分に配置します。

ページの下部にクライアント側で編集されたコンテンツが含まれている場合、Cookie またはデータベースを使用してそれらの変更を保存し、bottom.html ページにロードする必要があります。

于 2016-05-23T13:31:01.727 に答える