Click here to Skip to main content
15,892,005 members
Articles / Web Development / HTML

Dynamic Generation of Tabs to Host IFrames using jQuery and Json in ASP.NET MVC

Rate me:
Please Sign up or sign in to vote.
4.82/5 (6 votes)
1 Oct 2010CPOL8 min read 46.9K   1.6K   25  
This article introduces a method to dynamically generate tabs to host IFrames using jQuery and Json in ASP.NET MVC.
body {
    font-family: Verdana, Helvetica, Sans-Serif;
    font-size: 10pt;
    color: #000000;
    white-space: nowrap;
}

#Header {
	position: relative;
	top: 0px;
	height: 35px;
	color: #005DAA;					
}

#Header h1 {
    position: absolute;
    bottom: 20px;
    left: 0px;
    font-size: 10pt;
    margin: 0px;
	color: #005DAA;  
}

#Header .Author {
    position: absolute;
    bottom: 0px;
    left: 0px;
    font-size: 8pt;
    margin: 0px;
	color: #005DAA; 
}

#Footer 
{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
}

#Footer h1 
{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 4px;
    font-size: 8pt;
    color: Gray;
    font-weight: bold;
    margin: 0px;
    text-align: center;
}

/* ---- Tab styles ---- */

.FluidContent {
	position: absolute;
	bottom: 20px;
	left: 8px;
	right: 8px;
	overflow: hidden;	
	background-color: #3399CC;	
}

#MainTabs {
	top: 50px;
	background-color: #3399CC;		
}

#MainTabs .ui-tabs {
    padding: 0px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;    
}

#MainTabs .ui-widget-header .ui-state-default {
    border-width: 0px;
    background: #CCCCCC;
    margin-right: 2px;
}
#MainTabs li.ui-state-default a {
    padding: 4px 10px 3px 10px;
    border-bottom: solid #FFFFFF 2px;  
    color: #EEEEEE;  
    font-weight: bold;
}
#MainTabs .ui-widget-header .ui-state-active {
    border-width: 0px !important;
    background: #3399CC;
}
#MainTabs li.ui-state-active a {
    border-bottom: solid #3399CC 2px;  
    color: #FFFFFF;
}

#MainTabs .ui-tabs .ui-tabs-nav {
    padding: 0px;
    margin: 0px;
}
#MainTabs .ui-widget-content {
    padding: 0px;
    border-width: 0px;
    background-image: none;
    color: #000000;
    background-color: #3399CC;    
}
#MainTabs .ui-tabs-panel {
	position: absolute;
	top: 30px;
	left: 4px;
	bottom: 4px;
	right: 4px;	
}
#MainTabs .ui-widget-header {
    border-width: 0px;
    background-image: none;
    background-color: #FFFFFF;
}

.iframeMax {
	position: absolute;    
	top: 20px;
	left: 0px;
	bottom: 0px;    
	right: 0px;			
}
.iframeInner {
	height: 100%;
	width: 100%;		
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
I have been working in the IT industry for some time. It is still exciting and I am still learning. I am a happy and honest person, and I want to be your friend.

Comments and Discussions