Можно ли реализовать навигацию с помощью вкладок jquery ui вместо стандартных вкладок в проекте asp.net mvc 3? Вкладки очень похожи на те, что на этом сайте (Вопросы, Теги, Пользователи...). Есть примеры для этого?
Вот моя реализация.
1) Я создал стандартный проект MVC 3 с механизмом просмотра бритвы. Меню на странице Layout выглядит так.
<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>
