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: 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
Awesome! This was very helpful. Thanks.
ReplyDeleteYou welcome, I'm glad it helped!
DeleteGreat, thanks! Took me a while but finally got it working, thanks for the help.
ReplyDeleteYou welcome, Tom!
Deletegreat
ReplyDeleteTab1 Tab2 Tab3 .... Tab1 click next display
ReplyDeleteTab1 Tab2 .... Next tab1 click diaply
Registration form open this type of design code send th err m
This comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteToptan vozol için buraya tıklayın: toptan vozol
ReplyDeletesalt likit
ReplyDeletesalt likit
VCDİ
hatay
ReplyDeleteığdır
ısparta
mersin
ağrı
ASDXY
https://saglamproxy.com
ReplyDeletemetin2 proxy
proxy satın al
knight online proxy
mobil proxy satın al
FXAA
https://izmitone.com
ReplyDeletekuşadası
sex hattı
UNY4