0

ページレイアウトがヘッダー、セクション、フッターの動的Webサイトを作成する方法を考えていました

ヘッダーとフッターは常に静的であり、ユーザーがナビゲーションの一部 (ヘッダー内の「会社概要」など) をクリックすると、中央のセクションが動的に変化し、会社概要セクションでフェードアウトします。

可能であれば純粋なjavascriptを使用したいと思います。サーバー側の一部ではなく、セクションIDを指定し、navリンクのjavascript 「onClick」で、1つのセクションが表示され、別のセクションが表示されると仮定しますその代わりに。

この Web サイトで同様の例を見つけました: http://www.templatemonster.com/demo/44858.html

この効果を作成する最も簡単な方法は何ですか? 私は非常に短いアイデアを持っていますが、どうすればこれを実現できますか?

誰かがjsfiddleの例を含めることができれば、大いに感謝します

4

3 に答える 3

1

サーバーからデータをロードし、返された HTML を一致した要素に配置するjQuery メソッド.load()を使用できます。また、.toggle()メソッドを使用すると、要素を表示または非表示にすることができます。

次の例を考えてみましょう: index.htmlという名前のページがあるとします... 

<header>
  <nav>
    <ul><li id="nav-about">About us</li></ul>
  </nav>
</header>

<section>
  <article id="dynamic-viewer">
    Dynamic content will be placed here!
  </article>
</section>

<aside>
  <div id="loader" style="display:none">
    <img src="http://www.ajaxload.info/images/exemples/24.gif" />
  </div>
</aside>

...そして、ただのビューである about.htmlという名前の別のファイルがあります:

<div>
  <h2>About us</h2>
  <p>This content is placed dynamically into #dynamic-viewer</p>
</div>

次に、jQuery.load()メソッド を使用して、 about.htmlのコンテンツをindex.htmlのコンテンツ ラッパーに読み込みます。

//Click handler to load the "about" view
$(document).on("click.about", '#nav-about', function() {
    fnShowLoading(true);

    //Loads the content dynamically
    $('#dynamic-viewer').load('views/about.html', function() {
        fnShowLoading(false);
    });
});

//Shows or hides the loading indicator
function fnShowLoading (show) {
    $('#loader').toggle(!!show);
}

実際、ここで重要なのは次の行だけです。 

//loads the content dynamically
$('#dynamic-viewer').load('views/about.html', function() { });

//shows or hides the loader section
$('#loader').toggle(!!show);

于 2013-06-24T15:25:08.293 に答える
1

あなたがしようとしていることは pjax と呼ばれます。Pjax は XML Http リクエスト (ajax) を使用して、特定のコンテンツをプレースホルダーにロードします。

誰かが新しいページをクリックします。Javascript は、サーバーからこのページを要求します。ロードしたら、必要に応じて古いコンテンツをフェードアウトします。新しいコンテンツに置き換え、必要に応じてフェードインします。ブラウザーの履歴に状態を追加するには、pushstate を使用します。これにより、戻るボタンと進むボタンが機能します。

これは、新旧のブラウザ間でこれを簡単に行うのに便利な pjax ライブラリであり、適切な説明があります: https://github.com/defunkt/jquery-pjax

display:none を使用して 1 つのページにすべてのコンテンツを含めることはお勧めできません。これは、ユーザーがコンテンツをまったく表示しない場合でも、ブラウザでコンテンツをダウンロードする必要があるためです。それにもかかわらず、これはあなたが説明したものに近いこのアプローチを示すJSfiddleです:

http://jsfiddle.net/Tb4eQ/

//Wait for html to be loaded
$(document).ready(function(){
    //Store reference to frame to load content into in a var, as well as the content to load in.
    var $content = $('#div_1');
    var $frame = $('#my_frame');
    //Bind an event handler to the click event of something
    $('#press').on('click', function(){
        //fade out the frame, swap in the new content, and fade it back in.
        $frame.fadeOut('fast', function(){
            $frame.html($content.html()).fadeIn('fast');
        })
    });
});
于 2013-06-24T13:17:27.410 に答える
0

Ajax 呼び出しを使用してページの一部を部分的に更新するか、全体をロードして jQuery にクリック イベントでの要素の非表示と表示を処理させることができます。

http://www.w3schools.com/ajax/

http://api.jquery.com/hide/

于 2013-06-24T13:16:53.930 に答える