0

HTML / CSS / Javascript / jQueryの組み合わせを使用して、2列デザインのシンプルなWebページを作成したいと思います.1つの列には複数のリンクを持つナビゲーションメニューが含まれており、リンクをクリックすると他のコンテンツが変更されます.桁。今日これを行うための最良の方法は何ですか？

ずっと前に、フレームを使ってこれを行う方法を学びました。あるフレームにはメニューがあり、別のフレームにはコンテンツがあり、メニュー項目は form のアンカータグで囲まれています<a href="something.html" target="name-of-content-area">。この方法はまだ可能だと思いますか？

メニューとコンテンツ領域をフレームではなく div にして、コンテンツ div 内に iframe を配置することを推奨する人もいます。次に、メニュー項目のリンクは、今説明したのと同じ方法で行われます。

さらに、フレームや iframe を使用せずに div のみを使用し、Javascript を使用してコンテンツ領域のコンテンツを変更することを推奨する人もいます。つまり、アンカー タグは、<a href="#" onclick=func>func がコンテンツ領域のコンテンツを動的に変更するような形式を取ります。

最後に、div のみを使用し、メニューのアンカー タグの代わりにボタンを使用し、ボタンに添付された Javascript を使用してコンテンツ エリアのコンテンツを調整することを推奨する人もいます。

私が見逃したオプションがもっとあると思います。一般的に受け入れられている最新のベスト プラクティスはありますか?もしそうなら、それは私がリストしたものの 1 つですか?どれがどれで、その理由は? ベスト プラクティスが 1 つもない場合、代替の「適切な」オプションのそれぞれを使用する状況または理由は何ですか?

4

1 に答える 1

2

これを行うにはさまざまな方法があります。

  1. フレーム
  2. それぞれが共通のナビゲーションセグメントを含む個別のページ
  3. 複数の仮想ページを含む単一のページ

オプション1と2は自明です。2 over 1の利点は、ブックマークとブラウザの履歴が素晴らしくシンプルなことです。現在、多くの人々が3に向かって進んでいます。

これがオプション3の例としてまとめた簡単なJSFiddleです。醜いです、はい、私は何もスタイリングしませんでした。

http://jsfiddle.net/sJ6Bj/4/

HTMLは次のとおりです。

<html>

    <head>
        <title>Two-pane navigation</title>
    </head>

    <body>
        <div id="content">
            <div id="navigation">
                <h1>Navigation</h1>
                <ul>
                    <li><a href="#page1" class="page-link">Page 1</a></li>
                    <li><a href="#page2" class="page-link">Page 2</a></li>
                </ul>
            </div>

            <div id="pages">
                <div id="page1" class="page">
                    <h1>Page 1</h1>
                    <p>This is all the lovely content on page 1.</p>
                    <p>Let's add a bunch of stuff to make it scroll.</p>
                    <p style="font-size: 72px">.<br/>.<br/>.<br/>.<br/>.<br/>.</p>
                    <p>This is at the bottom of the page.</p>
                </div>

                <div id="page2" class="page">
                    <h1>Page 2</h1>
                    <p>This is all the lovely content on page 2.</p>
                </div>
            </div>
        </div>
    </body>

</html>

JavaScript（JQueryがロードされていることを前提としています）：

$(document).ready(function() {
    $(".page-link").on("click", function(e) {
        $(".page").fadeOut(250);
        setTimeout(function() { $($(e.currentTarget).attr("href")).fadeIn(250); }, 250);
    });
});

CSS：

#navigation {
    position: fixed;
    width: 250px;
    height: 100%;
    border-right: 1px solid black;
}

#pages {
    margin-left: 270px; /* 250px + 20px of actual margin */
}

.page {
    position: relative;
    display: none;
    overflow: scroll;
}

@RobGが上で述べたように、ブラウザは現在すべてを1ページと見なします。ただし、JQuery BBQのようなものを使用すると、それほど労力をかけずに追加し直すことができます（たとえば、ここを参照）。

フレームよりもdivを選択するのはなぜですか？さまざまな理由があります。

  1. フレームをブックマークすることはできません（上記の警告を参照）。
  2. フレームでのトランジションとアニメーションのサポートは非​​常に制限されており、個別の完全なページでは存在しません。上記のフィドルで簡単なフェードイン/フェードアウトを実行して、divで何が可能かを示しました。
  3. ユーザーが「ページ」を変更したときに何も再ロードする必要はありません（ただし、逆に、前もってさらに多くをロードする必要がある場合があります）。
于 2013-02-21T04:45:00.890 に答える