2

是否可以使用 jquery ui 选项卡而不是 asp.net mvc 3 项目中的标准选项卡来实现导航？标签与本网站上的非常相似（问题、标签、用户...）。有什么例子可以做到这一点吗？

这是我的实现。

1）我创建了带有剃刀视图引擎的标准 MVC 3 项目。布局页面中的菜单如下所示。

<div id="menucontainer">
    <ul id="menu">
        <li>@Html.ActionLink("Home", "Index", "Home", null, new { title="Index"})</li>
        <li>@Html.ActionLink("About", "About", "Home", null, new { title="About"})</li>
    </ul>
</div>

2) 这是我的 HomeController 操作。

public PartialViewResult Index()
{
    ViewBag.Message = "Welcome to ASP.NET MVC!";
    return PartialView();
}

public PartialViewResult About()
{
    return PartialView();
}

public ViewResult Default()
{
    return View();
}

3) 我还更改了 Global.asax.cs 以显示默认页面。

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        "Default", // Route name
        "{controller}/{action}/{id}", // URL with parameters
        new { controller = "Home", action = "Default", id = UrlParameter.Optional } // Parameter defaults
    );

}

4）最后这是我应用标签行为的脚本。

$(document).ready(function() {
$('#menucontainer').tabs();
$("menucontainer").bind('tabsselect',
    function(event, ui) {
        document.title = ui.tab.title;
    }
);});

所以 jQuery ui 只是为页面的每个选项卡添加额外的 div（在本例中为 2），然后 div#main 附加。我只想在用户转到菜单栏中的其他选项卡后动态替换 div#main 的内容。现在看起来像这样。

<div id="menucontainer">
    ...
    <div id="Index">
        Content of Index tab.
    </div>
    <div id="About">
        Content of About tab.
    </div>
</div>
<div id="main">
    Content of the page.
</div>
4

1 回答 1

0

确保您已定义ui-tabs-hideCSS 类以隐藏非活动选项卡：

.ui-tabs-hide {
    display: none;
}

jQuery UI 选项卡的工作方式是，在更改选项卡后，它只需将其添加ui-tabs-hide到所有其他选项卡，并在从 AJAX 调用刷新其内容后将其从当前可见选项卡中删除。

于 2012-06-20T08:40:22.933 回答