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