78

HTML でサイズ変更可能な分割ペインを作成するための優れた手法はありますか?

CSS / jQuery / JavaScriptを使用して行うことができますか、または使用されている優れたJavaScriptライブラリはありますか?

(分割ペインの例は、Internet Explorerのお気に入りバーで、メイン ブラウザー ウィンドウの左側にドッキングしている場合があります。)

4

14 に答える 14

7

昔は、これを実現するためにフレームを使用していました。このアプローチがあまり良くない理由はいくつかあります。HTML フレームが悪いのはなぜですか?に対する Reece の回答を参照してください。. Jakob Nielson のWhy Frames Suck (Most of the Time)も参照してください。

少し新しいアプローチは、インライン フレームを使用することです。これには長所と短所もあります: iframe は「悪い習慣」と見なされますか?

さらに優れたアプローチは、固定配置を使用することです。ナビゲーション コンテンツ (たとえば、例のお気に入りリンク) をブロック要素 ( などdiv) に配置し、その要素に適用position:fixedして、左、上、下のプロパティを次のように設定します。

#myNav {
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 200px;
}

... ユーザーがページをスクロールしても移動しない、ページの左側に垂直な列を作成します。

ページの残りのコンテンツは、この nav 要素の存在を「感じ」ないため、占有する 200 ピクセルのスペースを考慮する必要があります。これを行うには、コンテンツの残りを別の div と設定に配置しますmargin-left:200px;。

于 2012-08-30T10:31:28.567 に答える
4

別の JavaScript ライブラリがなくても、jQuery UI で実行できます。.resizableresize イベントに関数を追加して、他の div の幅を調整するだけです。

$("#left_pane").resizable({
  handles: 'e', // 'East' side of div draggable
  resize: function() {
    $("#right_pane").outerWidth( $("#container").innerWidth() - $("#left_pane").outerWidth() );
  }
});

これが完全なJSFiddleです。

于 2017-03-27T20:40:47.957 に答える
2

定位置のアブソリュートが使用できます。たとえば、この CSS は、ページの左側に 2em バーをドッキングします。

body {
    padding-left: 2.5em;
}
body > #bar {
    position:fixed;
    top:0; left:0;
    width: 2em;
    height: 100%;
    border-right: 2px solid #55F; background: #ddd;
}

( jsfiddle.net のデモ)

于 2012-08-30T10:23:38.473 に答える
1

jQuery v1.9 で動作するスプリッターhttp://www.dreamchain.com/split-pane/を見つけました。固定bootstrapナビゲーション バーで動作させるには、次の CSS コードを追加する必要があったことに注意してください。

fixed-left {
    position: absolute !important; /* to override relative */
    height: auto !important;
    top: 55px; /* Fixed navbar height */
    bottom: 0px;
}
于 2015-02-03T08:31:24.743 に答える
0

優れたライブラリは Shield UI です。柔軟なSplitter ウィジェットと、フレームワークが提供するその他の強力なコンポーネントを確認できます。

于 2016-10-31T16:19:43.087 に答える