Here is how to implement tabs inside MVC 5 project using jQuery UI library.
Steps To Do It:
1. Install jquery ui (combined library) to get the js files and base theme
These files will be added by the Nuget:
jquery-ui-1.11.1.js
jquery-ui.min-1.11.1.js
2. From
jquery UI website, make a custom download including the tabs widget and the desired theme (for example: 'Cupertino ' theme). Then add the file 'jquery-ui.css' to project under '/Contents' folder:
3. Add the following changes inside the <head> section in /Shared/_Layout.cshtml view file (Note that 2 file bundles (/bundles/jquery & /bundles/bootstrap) already exist in layout view but should be moved from bottom to top of the page):
@*moved from bottom of page*@
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<link rel="stylesheet" href="/Content/jquery-ui.css" />
<script src="/Scripts/jquery-ui-1.11.1.js"></script>
@*style for vertical tabs*@
<style>
.ui-tabs-vertical .ui-tabs-nav {
padding: .2em .1em .2em .2em;
float: left;
width: 12em;
}
.ui-tabs-vertical .ui-tabs-nav li {
clear: left;
width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px .2em 0;
}
.ui-tabs-vertical .ui-tabs-nav li a {
display: block;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
border-right-width: 1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
float: right;
width: 40em;
}
</style>
4. In /Home/index.cshtml view file: r
eplace existing code with code below (where 'TabsSet1' is for
horizontal tabs, & 'TabsSet2' is for v
ertical tabs):
@{
ViewBag.Title = "Home Page";
}
<title>@ViewBag.Title</title>
<h2 class="demoHeaders">IBR Testing JQuery UI Tabs</h2>
<div id="TabsSet1">
<ul>
<li><a href="#tabs-test">Test</a></li>
<li><a href="/home/About">About</a></li>
<li><a href="/Home/Contact">Contacts</a></li>
</ul>
<div id="tabs-test">
<h1>Welcome to this test tab</h1>
</div>
</div>
<br/><br/>
<div id="TabsSet2">
<ul>
<li><a href="/Home/About">About Us</a></li>
<li><a href="/Home/Contact">Contacts</a></li>
<li><a href="/Product/Index">Our Products</a></li>
<li><a href="#tabs-5">Tab X</a></li>
<li><a href="#tabs-6">Tab Y</a></li>
</ul>
<div id="tabs-5">
<h1>This is another Main tab</h1>
</div>
<div id="tabs-6">
<h1>Some Tab 2</h1>
</div>
</div>
<script>
$(function () {
$("#TabsSet1").tabs();
$("#TabsSet2").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#TabsSet2 li").removeClass("ui-corner-top").addClass("ui-corner-left");
});
</script>
Notes:
- Tabs can redirect to an MVC action (ex: href="/Home/Contact") or to another div content (ex: href="#tabs-5")
- Extra work required for adjusting the content for vertical tabs when page width is too small because the content div will overlap the tab boundaries.
A useful reference:
http://vizagtechie.blogspot.mx/2012/10/aspnet-mvc-dynamic-tab-using-jquery-ui.html?view=snapshot
