0

私は現在、を使用してWebアプリケーションを開発していますjQuery。同じレイアウトは、次の図に示すようになります。

一番後ろのオレンジ色のボックスは、高さと幅が 100% で、5px 程度のマージンが必要です。

ロゴとタブバーは図のように配置され、高さは約 50px です。ただし、タブバーは、示されているように、ある程度のマージンを持ったサイズにする必要があります。

タブのコンテンツは残りの高さを占める必要があり、それが占めるコンテンツをスクロールする必要があります。

内部のメニューバーとタブのコンテンツにも同様の構造が必要です。

誰もが使用するレイアウト方法を提案できますか? または、さまざまな高さ/幅を操作するにはどうすればよいですか?

この要件は、レスポンシブ ウィンドウ、つまりサイズ変更時に操作する幅/高さも示唆しています。

4

2 に答える 2

2

私が作ると言ったjsFiddle 。

ご覧のとおり、「タブ」レイアウトに jQueryUI を使用し、単純に「追加」するだけです。私が「追加」するいくつかのことは単純で、jQueryUI は必要な結果を得るために操作するための強力な CSS を提供します。また、そのページにはテーマ スイッチャーが添付されているため、さまざまな jQueryUI デフォルト テーマを使用するとどのように表示されるかを確認できます。

あいまいにならないように、プロセスをできるだけ簡潔に説明しようとします。

HTML

まず、基本的なページ ラッパーから始めます。あまり必要ではありませんが、内部で作業するための優れた「要素」を提供し、将来別の方法でページ レイアウトを変更するための操作を行う可能性があります。今のところ、5px のページの「パディング」を保持するだけです。HTML および BODY タグはデフォルトに設定され、それ以上の操作は行わないでください。これは、height やその他のプロパティがこれらのタグに対して異なるブラウザーで異なる意味を持ち始めるためです。

次に、このラッパー内に 2 つの div を配置します。これらは、ニーズに依存せずに行うことができます。私はこれらの 2 つの div が好きで、期待どおりに「垂直方向の配置 -> 中央」を提供するため、これをよく使用します。最初の親は、 class を持つ divtableです。これはdisplay、「テーブルのような」レイアウトを提供するためにテーブルに設定されますが、「角を丸くする」などの機能や、私の場合のように高さを設定する機能もあります。2 番目の子は、クラスとスタイルがそれぞれ となる以外は同じtable-cellです。vertical-align: middle;これにより、この要素がページ/テーブル要素の垂直方向の中央にあるように設定できます。繰り返しますが、あなたのレイアウトでは、これは不必要に思えるかもしれませんが、期待される最終結果が完全にはわからないので、できるだけ多くを与えようとしています」

最後に、最初に jQueryUI タブの HTML を予想されるレイアウトに挿入しますが、2 つの小さな違いがあります。の直前のカスタム span タグに「ロゴ」を配置しますul。私もui-tab-panel（s）を取り、それらを独自のコンテナに入れます。これにより、必要に応じてタブ領域の高さを調整できます。また、このコンテナにオーバーフローを与えたので、オーバーフローが本体に隠されていても、タブで使用できます。(参照: jQueryUI Tabs で書いた小さなブログ)

<div class="page-wrapper">
    <div class="table">
        <div class="table-cell">
            <div id="tabs">
                <span class="my-logo">
                    <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="logo here" />
                </span>
                <ul>
                    <li><a href="#tabs-1">Nunc tincidunt</a></li>
                    <li><a href="#tabs-2">Proin dolor</a></li>
                    <li><a href="#tabs-3">Aenean lacinia</a></li>
                </ul>
                <div class="ui-tabs-panel-container">
                    <div id="tabs-1">
                        <<p> ... </p>
                    </div>
                    <div id="tabs-2">
                        <p> ... </p>
                    </div>
                    <div id="tabs-3">
                        <p> ... </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

前に述べたように、jQueryUI は既に使用できる強力な CSS を提供してくれます。お気づきかもしれませんが、HTML 全体で事前定義されたクラス名を使用して、これらの一部を利用しました。これによりbackground、color、 、さらにはfont-familyさらに多くのことが確立されました。以上で、ページの仕組みを最初にレイアウトしましょう。前述したように、私は非常に「直接的な」一連のプロパティをHTMLとに与えBODYます。これは、「クロスブラウザーの問題」を解消するのに役立ちます。また、子レベルの 1 つで設定できる背景色も用意しました。これは、HTML、BODY が存在する場所を示すためだけに行われました。

次に、「フレーム」要素を設定します。.page-wrapperはページのラッピングを提供し、サイズは内部から取得されるため、ここで処理する必要はありません。.tableとは.table-cell、その名前が示すとおりに表示を提供します。前述のように、これにより、要素を何かの正確な「中心」に維持する優れた機能が提供されます。

次に、タブとコンテンツを操作します。#tabs「名前空間」を維持するために全体で使用します。これは、jQueryUI プリセットの「css オーバーライド」に役立つだけでなく、ページ レイアウトの混乱を最小限に抑えるのにも役立ちます。これは常に良いことです。

最初に操作するのは、ロゴのカスタム スパンの配置と設定です。次に、もちろん、そのul隣のをに変更する必要があります。ulしたがって、 s クラスの CSS を調べます。ブラウザーで編集ツールを開くと、ul にクラス名が指定されui-tabs-navていることがわかり、マージン設定があることがわかります。このmargin-leftul をいじってみると、ul の左側以外は何も影響を受けていないことがわかります。完全！ログを「独自のスペース」に設定するために操作する必要があるのは次のとおりです。

ui-tabs-panel-container最後に、タブ コンテナ ( jQueryUI に一致するカスタム クラス名 を指定) をオーバーフローに設定するだけで、コンテンツがページの高さを超えても、この要素内でスクロールできるようになります。

html, body {
    background-color: #ADDFFF;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100%;
}
.page-wrapper {
    padding: 5px;
}
.table { display: table; }
.table-cell { display: table-cell; vertical-align: middle; }
#tabs .my-logo {
    display: inline-block;
    float: left;
    height: 2em;
    margin: .5em 0 0;
    padding: 0;
    width: 2em;
}
#tabs .my-logo img {
    max-height: 100%;
    max-width: 100%;
    float: left;
}
#tabs .ui-tabs-nav {
    margin-left: 2em;
}
#tabs .ui-tabs-panel-container {
    overflow: auto;
}

JS

最後に簡単な作業です。タブのコンテンツ領域の高さを設定する関数を作成します。これは、ページの残りの部分を「埋める」ためです。これは少し考える必要がありますが、理解するのは難しくありません。関数を作成したら、それをウィンドウのサイズ変更イベントに追加し、その直後にそのイベントを呼び出します。このようにして、ロード時にサイズが変更されるため、最初のビューの「終了高さ」が得られます。また、「デフォルトのタブ」を作成しているだけなので、あまり作業はありませんが、タブも作成します。気軽に実験して、ワイルドに！

//  the following will resize our tabs content area and account for all the spacing neccessary
function setContentHeight(e) { return $(window).innerHeight() - $(this).offset().top - 10; }  // -10 to account for padding

$(function() {  //  our on page load call
    $("#tabs").tabs();  //  establish tabs
    //  add ability to resize tabs content area on window resize, then call resize event
    $(window).resize(function(e) { $("#tabs .ui-tabs-panel-container").height(setContentHeight) }).resize();
})

タブ コンテンツのレイアウトに関しては、すべてあなたとあなたの想像力次第です。うまくいけば、これがどこから始めるべきかの良いアイデアを与えるでしょう! 幸運を！

于 2013-05-27T16:13:09.813 に答える