2

ASP.NET MVC を使用して新しいアプリケーションを作成しています。

ウィンドウの上部にある一連の jQuery タブを使用して、ユーザーがアプリケーションのさまざまなモジュールにアクセスできるようにしたいと考えています。

アプリ全体でタブを複製しないように、タブを共有レイアウト ビューに配置したいと考えています。

首尾一貫した解決策が見つからないように見える 2 つの矛盾する問題に直面しています。

  1. タブをクリックすると、コンテンツを div にロードするだけでなく、ウィンドウ全体がそのページに移動するようにします。特定のモジュールのブックマークを可能にするためにこれを行っています。(アドレス バーには、単に「メイン ページ」の URL ではなく、現在のコンテンツの URL を含めたいと思います。)

  2. 現在、 $("#tabs").tabs(); を呼び出すとき jQuery はタブごとに div を作成し、href のコンテンツを div にロードしようとします。それは、自分が入れ子になっているページのコピーを作成することになります。

これが私のタブ定義です（デフォルトのレイアウトページから）：

   <section class="tabs">
        <div id="tabs">
            <ul>
                <li><a href="Home" rel="Home">Instructions</a></li>
                <li><a href="Questions" rel="Questionnaire">Questions</a></li>
                <li><a href="Submit" rel="SubmitAndConfirm">Finish</a></li>
                <li><a href="FAQ">FAQ</a></li>
            </ul>
        </div>
    </section>

そして、これが私がそれらを設定するために使用しているスクリプトです:

function SetupTabs(sel) {

    $("#tabs").tabs();

    $("#tabs").tabs("select", sel); // Selects the tab
    $('#tabs').tabs({
        select: function (event, ui) {
            location.href = ui.tab.rel;
        }
    });
}

これにより、実際にはページが正しくナビゲートされますが、ページ自体がネストされます (上記の問題 #2)。メイン ページが表示されるように再配置し、部分ビューを使用してタブからコンテンツを読み込むと、アドレス バーに使用可能な URL が表示されません (上記の問題 #1)。

どんなアイデアでも大歓迎です。これが jQuery タブの設計パラダイムではないことはわかっていますが、アプリの他の場所でそれらを使用しており、多くの jQuery UI をテーマにした要素を使用しているため、この要素についてもそれらに固執したいと思います。 、私がそれを機能させることができれば。

ありがとう

4

1 に答える 1

4

各タブのクリックがナビゲーションとして機能するようにするため、JQueryUI タブを使用しないことを検討することをお勧めします。代わりに<ul>、クリック イベントが設定されたタブのように見えるスタイルを使用して、必要なページに移動します。

于 2012-04-25T18:42:18.270 に答える