1.建立两个页面Tab1.aspx 和 Tab2.aspx,这两个页面将在tabs中显示.
后台DefaultController.cs代码:
public class DefaultController : Controller { //get Index public ActionResult Index() { return View(); } //get Tab1 public ActionResult Tab1() { return View(); } //get Tab2 public ActionResult Tab2() { return View(); } }
2.修改默认路由.设置Index.aspx为默认页
public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( "Default", // 路由名称 "{controller}/{action}/{id}", // 带有参数的 URL new { controller = "Default", action = "Index", id = UrlParameter.Optional } // 参数默认值 ); }
3.建立一个承载tabs的页面Index.aspx, 这样就可以在该页面上进行页面切换的实现.对所用到的js和css进行引用.
<link href ="Content/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
在 Index.aspx 添加以下代码.
<div id="tabs"> <ul> <li><%=Html.ActionLink("Tab1", "Tab1", "Default")%></li> <li><%=Html.ActionLink("Tab2", "Tab2", "Default")%></li> </ul> </div>
显示效果如下:
用jQuery ui tabs 产生选项卡效果.在Index.aspx中加入以下代码:
<script type="text/javascript"> $(function () { $('#tabs').tabs(); }); </script>
显示效果:
4.jQuery ui tabs 的一些简单用法:
//把当前tab选项卡里的页面换成Tab2
function changeTab2() { //get the selected tab's index var selected = $('#tabs').tabs('option', 'selected'); //change the selected tab's url $('#tabs').tabs('url', selected, '/Default/Tab2'); //reload the selected tab $('#tabs').tabs('load', selected);
};
//在tabs中添加新的选项卡
$('#tabs').tabs('add', '/Default/Tab1', 'Tab1');
5.这里有更详细的介绍 http://msdn.microsoft.com/en-us/magazine/ff679948.aspx