If you have multiple DataPages deployed on a single web page, you can save space and provide simplified navigation by using a tabbed view. This article provides step-by-step instructions to implement a Dynamic Drive’s tab view component.  You can find a full description of the tab content script at http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm.

Steps to add a tabbed view to your webpage:

  1. Add the below CSS and script into the HEAD section of your HTML page:
<link rel="stylesheet" type="text/css" href="tabcontent.css" />
<script type="text/javascript" src="tabcontent.js"></script>

The code above references four external files, which you need to download below:

NOTES:

– If the links don’t open properly, copy and paste the link in a new page.
– Caspio doesn’t host any Javascript/CSS, so you need to host the script and CSS on your site.

  1. Add the tabbed view code into the body of the page

The following HTML codes should be pasted into your HTML body where you would like the tab content to appear on the page.

<ul id="caspiotabs" class="shadetabs">
<!-- Change the tab labels -->
<li><a href="#" rel="datapage1" class="selected"> My Tab Name 1</a></li>
<li><a href="#" rel="datapage2"> My Tab Name 2</a></li>
<li><a href="#" rel="datapage3"> My Tab Name 3</a></li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<div id="datapage1" class="tabcontent">
<!-- Embedded Caspio DataPage Deploy Code -->
</div>
<div id="datapage2" class="tabcontent">
<!-- Embedded Caspio DataPage Deploy Code -->
</div>
<div id="datapage3" class="tabcontent">
<!-- Embedded Caspio DataPage Deploy Code -->
</div>
</div>
<script type="text/javascript">
var dptabs=new ddtabcontent("caspiotabs");
dptabs.setpersist(true);
dptabs.setselectedClassTarget("link"); //"link" or "linkparent"
dptabs.init();
</script>
  1. Change the tab labels

Replace the text “My Tab Name 1” with your desired tab name.

<li><a href="#" rel="datapage1" class="selected">My Tab Name 1</a></li>
  1. Insert your DataPages

Deploy each of your DataPages using the embed deployment method and replace the text <!– Embedded Caspio DataPage Deploy Code –> with your DataPage deploy code.

NOTE: iframe is not recommended when using authenticated DataPages and passing parameters in the tab content.

Enhancement and Customization

If you need more customizability for your webpage you can take a look at the full description of the Tab Content script at http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm.  It provides a lot of other features including a slideshow mode, dynamic tab selection, and extra formatting tools.

Note 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.