Question

我已经在这几天挣扎了几天，我想我会把它放在那里，看看是否有人可以提供帮助。我有一个MVC4应用程序，我使用JQuery选项卡作为菜单。我已经通过将部分视图返回到选项卡来实现了这一点。问题是我没有浏览器历史记录而且我没有维护MVC RESTful页面“{controller} / {action} / {id}”任何人都可以帮我弄清楚是否有办法根据内容更改URL单击选项卡？

<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
            });

Answer 1

您可以使用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/

我希望这会有所帮助，祝你的应用好运！

Answer 2

这不是一个真正的答案它更多的是对使用JS Tabs的误解。我根本没有最终使用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>

JQuery Tabs和MVC集成同时保留REST

2 个答案: