October 6, 2014

Tabs in MVC 5 Using JQuery UI



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;
floatleft;
width12em;
}
.ui-tabs-vertical .ui-tabs-nav li {
clearleft;
width100%;
border-bottom-width1px !important;
border-right-width0 !important;
margin0 -1px .2em 0;
}
.ui-tabs-vertical .ui-tabs-nav li a {
displayblock;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
padding-bottom0;
padding-right.1em;
border-right-width1px;
border-right-width1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding1em;
floatright;
width40em;
}
</style>


4.  In /Home/index.cshtml view file: replace existing code with code below (where 'TabsSet1' is for horizontal tabs, & 'TabsSet2' is for vertical 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


4 comments:

  1. Awesome! This was very helpful. Thanks.

    ReplyDelete
  2. Great, thanks! Took me a while but finally got it working, thanks for the help.

    ReplyDelete