0

独自の URL を使用して、サーバー上の別の HTML ファイルにリンクするメニュー タブが必要です。これ自体には CSS 以外は何も必要ないことはわかっていますが、ページの関連セクションのみをロードするだけでなく、Javascript 対応メニューの「即時ロード」効果も維持したいと考えています。(CSS のみのメニューでは、ページ全体がリロードされると思います)。これは可能ですか？

4

2 に答える 2

0

Knockout.js や JQuery を使用すると可能です。

JQuery UI によって提供される Tabs プラグインを使用して、JQueryですべてを実行できます。デフォルトの「タブ付き」の外観ではなく、メニューに似たものを取得するには、独自の CSS をすべて作成する必要があります。

または、Knockout.jsを使用して、メニュー項目にバインドされた一連のコマンドを含むクライアント側ビュー モデルを作成することもできます。各コマンドは、おそらく JQuery を使用して、ページの更新をトリガーします。

以下は、基本的なメニューから始めて、これがどのように機能するかを示す非常に高レベルの例です。

<ul>
 <li data-bind="menuOption1">
 ...
 </li>
</li>

Knockout.js ビュー モデル

var MenuViewModel = function ()
{
  this.menuOption1 = function () {
    // TODO: show the discreet HTML page
  }
}

ko.applyBindings(new MenuViewModel());

実際にどのようにページを表示するかはあなた次第です。おそらく、JQuery AJAX呼び出しを使用してページ コンテンツを読み込むのが最も簡単でしょう。

于 2012-07-20T17:40:38.960 に答える
0

メニューの作成方法やスタイル設定は、メニューにリンクされているページがクリックされたときに読み込まれる方法には影響しません。クリック時のページのリロードを回避するには、ajaxそのページにリクエストを送信し、現在のページにロードする必要があります。

クロスブラウザーの問題を回避するために、jQuery の AJAXを使用することをお勧めします。

例：

$('#menu a').click(function(ev){
    $.ajax({
        url: "test.html",
        cache: false
    }).done(function( html ) {
        $("#results").append(html);
    });

    ev.preventDefalt();
});
于 2012-07-20T17:35:00.223 に答える