Create an Embeddable Tabbed Interface
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 your DataPage Deploy Codes
Deploy each DataPage using the “Direct from Caspio” method. Record the direct from Caspio URLs because they will be used later.
Create an HTML DataPage
Now we will create the DataPage that will contain the Tabbed Interface. Create a new DataPage and under the custom type select HTML Page.
Proceed to the HTML source page. Copy and paste 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 Direct from Caspio URL 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:
<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
Please 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.
