Tabbed interfaces are great to provide lots of function in a limited space. Using nested iFrame deployment, you can create a tabbed interface that is easily deployable on multiple webpages.

Steps to creating an embeddable Tabbed Interface

Create your DataPages

This method can be used to combine any DataPage types. In this example we are going to combine a Submission Form, a Report, and a Chart.

Collect URLs of the deloyed DataPages

Deploy each DataPage using the “URL” method. Record the URLs because they will be used later.

Create an HTML DataPage

Now we will create the DataPage that will contain the tabbed interface. Click New DataPage and select HTML for the DataPage Type.

Proceed to the Page Design screen. Go to the Source and insert the following code into your HTML Page:

<style>
.ui-resizable-helper { border: 1px dotted gray; }
ul#menu { width: 100%; height: 43px; background: #007c62; font-size: 0.8em; font-family: "Arial", sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; }
ul#menu li { display: block; float: left; margin: 0 0 0 5px; padding: 8px 15px 0; cursor:pointer;}
ul#menu li a {color: #fff; text-decoration: none; display: block; float: left; line-height: 200%; }
ul#menu li a:hover { color: #333; }
.content{display:block; width:400px; height:400px; padding:30px; border:2px solid gray; overflow:hidden; position:relative;}
.ChannelView{ width:100%; height:100%; margin-bottom:100%;}
</style>

<script>
function getElementByClass(classer) {
var allHTMLTags=document.getElementsByTagName("*");
var array = [];
for (i=0; i<allHTMLTags.length; i++) {
if (allHTMLTags[i].className==classer) {
array.push(allHTMLTags[i]);
}}
return array;}

function channel(n){
var frames = getElementByClass("ChannelView");
var length = frames.length;
for(var i = 0; i < length; i++)
{ if(frames[i].id == ("viewer"+ n))
{ frames[i].style.display = "inline";
}else{ frames[i].style.display = "none";}}}
</script>

<div style="display:block; text-align:left;">
<div style="display:block;">
<ul id="menu">

<li><a onclick="channel(0)">Tab 0</a></li>
<li><a onclick="channel(1)">Tab 1</a></li>
<li><a onclick="channel(2)">Tab 2</a></li>

</ul>
</div>

<div class="content">

<iframe frameborder=0 id="viewer0" class="ChannelView"  src="URL of Tab 0" style="display:inline"></iframe>
<iframe  frameborder=0 id="viewer1" class="ChannelView" src="URL of Tab 1"></iframe>
<iframe  frameborder=0 id="viewer2" class="ChannelView" src="URL of Tab 2"></iframe>

</div>
</div>

Change the text of the tabs

The text of the tabs is located in the list items within the ul tag with id “menu”. The default text for the tabs is “Tab 0”, “Tab 1” & “Tab 2” and is highlighted in orange.

Change the URL of the tabs

Replace “URL of Tab #” with the corresponding URL links into the source attribute of each iframe.

Change the color of the tabs

The styling code for the tabbed control is located between the style tags. You can change the CSS without affecting any of the tabbing behavior.

Further customization

The sample code includes three tabs. You can add more by duplicating the sample. Each tab consists of a control and iframe content. Add a new control by adding a new list item line in the “menu” ul. Make sure to increment the channel number by one, and customize the visible text.

Add content for your new tab by duplicating the last sample iframe. Increment the ID and customize the source (src) attribute to include the URL of your content.

This sample shows a tabbed interface with independent DataPages. If you wanted to query / filter all of the records dynamically you could use a Details Report instead of an HTML page and pass the search criteria to the nested iframes using parameters.

Make the tab content resizable

To make the tab control resizable, copy and paste the following code into your webpage header:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(function() {
$( ".content" ).resizable({
animate: true, animateEasing: 'swing', animateDuration: 500
});
});
</script>

A small handle graphic will appear in the bottom-right corner indicating the control is now resizable. The CSS definition to style these handles is: .ui-resizable-handle

NotePlease note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge’s standard feature set. These solutions are provided “as is” without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.