Creating Tabbed Navigation for Multiple DataPages

2 minutes to read

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:

Add the below CSS and script into the Head section of your HTML page:
The code above references four external files, which you need to download. If the links don’t open properly, copy and paste the link in a new page.
Note: Caspio doesn’t host any Javascript/CSS, so you need to host the script and CSS on your site.
Add the tabbed view code into the body of the page. Paste the following HTML codes into your HTML body where you would like the tab content to appear on the page.
Change the tab labels by replacing the text “My Tab Name 1” with your desired tab name.
Deploy each of your DataPages using the embed deployment method and replace the text 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: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio 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.
For assistance with further customization based on your specific application requirements, please contact our Professional Services team.

code1

<link rel="stylesheet" type="text/css" href="tabcontent.css" />
<script type="text/javascript" src="tabcontent.js"></script>

code2

<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> 
<script type="text/javascript">
var countries=new ddtabcontent("caspiotabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>

code3

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

Creating Tabbed Navigation for Multiple DataPages

code1

code2

code3

code4