web-dev-qa-db-ja.com

jQuery UIを使用したサイズ変更可能なペインを備えたフルページレイアウト

Webアプリの全体的なレイアウトを作成しようとしています。アプリはフルスクリーンで、固定ヘッダーと3つの列/ペインがあります。中央のペインは2行で構成されています。

app wireframe layout

ペインの端をマウスでドラッグして、ペインのサイズを変更できるようにする必要があります（上の画像の矢印を参照）。

コンテンツがオーバーフローする場合、つまり、グローバルブラウザウィンドウのスクロールバーがない場合、個々のペインには垂直スクロールバーが必要です。

JQueryとjQuery UI Resizableを使用して、 this（parting working）JSFiddle を作成しました。

HTML：

<div class="header">
  Fixed header    
</div>
<div class="wrapper">
   <div class="inner-wrapper">
       <div class="left pane">Left</div>
       <div class="center pane">
           <div class="inner">
               <div class="top">Center top</div>
               <div class="bottom">Center bottom</div>
           </div>
       </div>
       <div class="right pane">Right</div>
   </div>
</div>

CSS：

html, body {
    height: 100%;
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background-color: moccasin;  
}
.wrapper {
    position:absolute;
    top: 21px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: Fuchsia;
}
.inner-wrapper,
.center.pane .inner {
    display: table;
    width: 100%;
    height: 100%;
}
.pane {
    display: table-cell;
}
.left.pane {
   background-color: olivedrab; 
}
.center.pane {
    background-color: lightblue;
}
.center.pane .inner .top,
.center.pane .inner .bottom{
    display: table-row;  
}
.center.pane .inner .top {
    background-color: lightcoral;   
}
.center.pane .inner .bottom {   
    background-color: orange;
    height: 100%;
    width: 100%;
}
.right.pane {
    background-color: #999;
}

JavaScript：

$(function () {
    $(".left.pane").resizable({
        handles: "e, w"
    });
    $(".right.pane").resizable({
        handles: "e, w"
    });
    $(".center.pane .inner .bottom").resizable({
        handles: "n, s"
    });
});

以下を含むいくつかの問題があります。

  • Leftのサイズを変更すると、Rightもサイズ変更されます（これはすべきではありません）
  • 左のサイズを全幅に変更すると、中央のコンテンツは右の下に隠れます
  • Rightのサイズを変更すると、ラッパー（フクシア色）が部分的に見える
  • センター下部は、それ自体の上部ではなく、センター上部の上部でサイズ変更されます

私はjQuery Layoutプラグインを知っていますが、私が見る限り、私が望んでいるレイアウトを提供していません。また、できるだけシンプルに保ちたいと思います。

さらに、私はMethvinsスプリッタプラグインを試しましたが、動作させることができませんでした。

私の質問：

jQuery UI Resizableの画像のようにレイアウトを作成する方法、および JSFiddle ？にあるものに関する提案

jquery-uiweb-applicationsjquery-ui-resizable
22
agibsen

必要なものを取得するためのjQueryに基づいた、より適切なプラグインがあります。

オプション1：

私は自分のプロジェクトで個人的に使用しました UI Layout .

それはほとんど古いプロジェクトです（6年前）が、2014年9月以降に情報がなくても、2014年半ばに開発が再開されます。

実際、最後の安定バージョンは1.4.3で、14年9月にリリースされました。新しいWebサイトは次のとおりです。

オプション2：

より完全なソリューションが必要な場合は、 jEasy UI について考えることができます。これは、

[...] Webページを簡単に作成できます

これは、jQuery UIの一種の置き換えであり、いくつかの類似のウィジェット（ダイアログ、アコーディオン、...）および レイアウトモジュール 、すでに答えにリンクされています。

オプション3：前のもののアナログソリューションは Zino UI 、「 Split Layout 」専用の特定のコンポーネントを持つ別の完全なUIフレームワーク

オプション4： jQWidgets は別のライブラリです、以前のものと同様の目的で、特に興味深いものになる可能性があります jqxSplitter モジュール。

関連する代替（類似）：

また、ブラウザウィンドウでパネルをスライスできるが、さらにdrag＆drop単一のパネルで異なるタブを作成したり、サブウィンドウを並べたりすることもできます。

これは Golden Layout と呼ばれます。以前のものとは異なり、多くの理由でより強力ですが、現時点では確かにタッチサポートがありません...

30
Luca Detomi

JEasy UIに比べてよりミニマルなものを探しているなら、この要件に受け入れられると思われるものを見つけました。 ：）

試してみます。うまくいけば、他の人の検索時間を節約するために、これを共有したかっただけです。

7
fentas

気に入らない振る舞いを引き起こす小さな問題がいくつかありました。

これらはこれで修正されました Fiddle

問題は次のとおりです。

左のサイズを変更すると、右もサイズ変更されます（そうすべきではありません）

初期幅（パーセント）を設定することにより修正

左を全幅にサイズ変更すると、中央のコンテンツは右に隠れます

再現できませんでした

右にサイズを変更すると、ラッパー（フクシア色）が部分的に表示されます中央下部は、独自の上部ではなく、中央上部の上部でサイズ変更されます

サイズ変更時に左を0に設定することで修正されました。

$(".right.pane").resizable({
    handles: "e, w",
    resize: function(event, ui) {
      ui.position.left = 0;
    }
  });

センターボトムは、それ自体のトップではなく、センタートップのトップを介してサイズ変更されます

これは、JQuery UI Resizableがテーブルセルでは機能しない相対配置を使用するためです。サイズ変更を処理するコンテンツdivを追加して修正しました。

<div class="top pane"> 
   <div class="top-content">Center top</div>
</div>
3
Richard Houltz

Gridstack を使用できます。使いやすく強力です。

1
bensadiz

私はこれに対する答えを自分で思いつきましたが、最終的には1年以上の開発が必要でした！結果は、jQueryとjQuery UIウィジェットファクトリを使用して構築された、最新のレスポンシブパネルレイアウトウィジェットです。

http://www.silvercore.co.uk/widgets/プロパンllayout /

質問された時点での最良の解決策は間違いなくjQuery UI.Layoutでしたが、時間が経つにつれてプロジェクトは停滞し、プラグインはjQuery 2で動作しません。GitHubでリリースされているコードにもかかわらず、疑わしい長期プロジェクトの基盤として。

ここに投稿された他のリンクのいくつかは現在無効になっており、完全なアプリケーションフレームワークを必要としない、または必要としない場合、選択肢は限られています。

1
Stephen Blair

私はjqueryでこのプラグインを使用しています

http://www.bramstein.com/projects/jlayout/jquery-plugin.html

1
Gerardo Pacheco

OK、できれば最後の編集。これらの束を経て、jQuery UIレイアウトになりました。

Goldenlayoutは素晴らしいですが、実際にはjavascriptを介して各ペインにhtmlを追加する必要があります。反応コンポーネントにすべてのものがある場合、これは問題ないかもしれませんが、私のユースケースには適していません。

jQuery UIレイアウトは非常に堅牢であるようで、2014年に更新されました。

0
Greg Blass