Tech Tip: Create Tabbed Navigation for Multiple DataPages
If you have multiple DataPages deployed on a single web page, you can save space and provide simplified navigation by using tabs. This article provides step-by-step instructions to implement tabbed navigation using a third-party component by Dynamic Drive. 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 can download below by right-clicking on each link and selecting the “Save As” option:
By default, upload these files into the same directory as where your web page resides.
2. Add the tab code into the body of the page
The following HTML codes should be pasted into your HTML body tag wherever 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″> 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>
3. Change the tab labels
Replace the green text “My Tab Name 1” with your desired tab name.
<li><a href=”#” rel=”datapage1″>My Tab Name 1</a></li>
4. Insert your DataPages
Deploy each of your DataPages using the embed deployment method and replace the blue 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 require more customization, you can take a look at the full description of the script at http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm. It offers other features including a slideshow mode, dynamic tab selection, and extra formatting tools.
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.