1

私は数日間これに苦労しており、そこに出して誰かが助けてくれるかどうか見てみようと思いました. MVC4 アプリケーションがあり、JQuery タブをメニューとして使用しています。部分ビューをタブに戻すことでこれを実装しました。問題は、ブラウザの履歴がなく、MVC RESTful ページ「{controller}/{action}/{id}」を維持していないことですタブがクリックされましたか？

<div id="tabs">
<ul>
    <li>@Html.ActionLink("Household Info", "Info", "HouseholdFees", null, new { title = "HouseholdInfo" })</li>
    <li>@Html.ActionLink("Household Management", "Management", "HouseholdFees", null, new { title = "HouseholdManagement" })</li>
    <li>@Html.ActionLink("Household Approval", "Approval", "HouseholdFees", null, new { title = "HouseholdApproval" })</li>
    <li>@Html.ActionLink("Household Administration", "Index", "HouseholdFeesAdministration", null, new { title = "HouseholdAdministration" })</li>
</ul>
</div>

と

            $("#tabs").tabs({
                cache: false,
                spinner: 'Loading task...',
                beforeLoad: function(event, ui) {
                    ui.jqXHR.error(function() {
                        ui.panel.html(
                            "Loading...");
                    });
                },
                collapsible: false
            });
4

2 に答える 2

0

これは、JavaScript をアンカー/ハッシュ ソリューションとして使用することで実現できます。まず、タブが選択されたときの URL のハッシュを変更します。

$("#tabs").bind("tabsselect", function (event, ui) {
    window.location.hash = ui.tab.hash;
});

現在のハッシュに反応する関数を作成します。

function setCurrentTabFromHash() {
    $("#tabs").tabs("select", window.location.hash);
}

その関数を次から呼び出します。

$(document).ready(function () {
    setCurrentTabFromHash();
});

と：

$(window).hashchange(function(){
    setCurrentTabFromHash();
});

別の方法として、Ben Alman のすばらしい BBQ プラグインを統合して、非同期ブラウザの履歴を表示することもできます。

http://benalman.com/projects/jquery-hashchange-plugin/

これがお役に立てば幸いです。あなたのアプリで頑張ってください!

于 2013-08-06T18:26:54.117 に答える
-1

これは実際には答えではありません。JS タブの使用についての誤解です。JS Tabs コンポーネントを悪用してメニューを作成しようとしたため、まったく使用しませんでしたが、ルック アンド フィールが気に入ったので、JS のスタイリングを動的に追加する新しい JS クラスを作成しました。 TABS コンポーネントを自分のメニューに追加します。私はすべての ajax ビットとキャッシングなどを失いました...しかし、これは私のニーズにとってより良い解決策だったと思います。

JS 拡張機能:

(function ($) {
$.fn.tabmenu = function() {

    // Plugin code
    return this.each(function() {
        $(this).addClass("ui-tabs ui-widget ui-widget-content ui-corner-all");
        $(this).find("ul").addClass("ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all");
        $(this).find("li").addClass("ui-state-default ui-corner-top")
            .bind('mouseenter', function () {
                $(this).addClass("ui-state-hover");
            })
            .bind('mouseout', function() {
                $(this).removeClass("ui-state-hover");
            });
        $(this).find("#main").addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
        $(this).find("a").addClass("ui-tabs-anchor");

        var parts = window.location.pathname.split("/");

        for (i = 0; i < parts.length; i++) {
            $("a[title*='" + parts[i] + "']").parent().addClass("ui-tabs-active ui-state-active");
        }
    });
};
})(jQuery);

MVC LAYOUT ページに次のコードを追加しました。

    <script>
        $(function() {
            $("#tabsmenu").tabmenu();
        });
    </script>


            <div id="tabsmenu">
                <ul>
                    <li>@Html.ActionLink("Household Info", "Info", "HouseholdFees", null, new {title = "HouseholdInfo"})</li>
                    <li>@Html.ActionLink("Household Management", "Management", "HouseholdFees", null, new {title = "HouseholdManagement"})</li>
                    <li>@Html.ActionLink("Household Approval", "Approval", "HouseholdFees", null, new {title = "HouseholdApproval"})</li>
                    <li>@Html.ActionLink("Household Administration", "Index", "Administration", null, new {title = "HouseholdAdministration"})</li>
                </ul>


                <div id ="main">
                    @RenderBody()
                </div>

            </div>
于 2013-08-07T12:45:29.997 に答える