Dynamic TAB tables for the Web

This tip describes Web tab tables how they should work. There is no need to go back to the server to get the next tab.

Add this pass through HTML to your Domino form. This creates the tab tables tabs. Replacing the <Computed Value>'s with a computed text that contains this @function

@ReplaceSubstring(@Subset
(@DbName ; -1) ; "/" ; "")

<table border="0" cellspacing="0" 
cellpadding="0">
<tr>
<td>
<table bgcolor="E1E1E1" border="0" 
cellspacing="0" cellpadding="0" 
id="Cat1TabOff" class="Tabs" 
style="display:none">
<tr>
<td valign="top"><img src="/
<Computed Value>/opentab.gif">
</td>
<td><a href=javascript:doCategories
('Cat1','Category') id="Cat1" class="Category">
<font size="1" face="MS Sans Serif">Tab 1
<font></a></td>
<td valign="top"><img src="/
<Computed Value>/closetab.gif">
</td>
</tr>
</table>
<table bgcolor="E1E1E1" border="0" 
cellspacing="0" cellpadding="0"  
id="Cat1TabOn" class="Tabs" style="display:">
<tr>
<td bgcolor="white" valign="top">
<img src="/<Computed Value>
/opentab.gif"></td>
<td bgcolor="white"><font size="1" 
color="black" face="MS Sans Serif">Tab 1
<font></td>
<td bgcolor="white" valign="top">
<img src="/<Computed Value>
/closetab.gif"></td>
</tr>
</table>
</td>
<td>
<table bgcolor="E1E1E1" border="0" 
cellspacing="0" cellpadding="0" 
id="Cat2TabOff" class="Tabs" 
style="display:">
<tr>
<td valign="top"><img src="/
<Computed Value>/opentab.gif">
</td>
<td><a href=javascript:doCategories
('Cat2','Category') id="Cat2" class="Category">
<font size="1" face="MS Sans Serif">Tab 2
<font></a></td>
<td valign="top"><img src="/
<Computed Value>/closetab.gif">
</td>
</tr>
</table>
<table bgcolor="E1E1E1" border="0" 
cellspacing="0" cellpadding="0"  id="Cat2TabOn" 
class="Tabs" style="display:none">
<tr>
<td bgcolor="white" valign="top">
<img src="/<Computed Value>
/opentab.gif"></td>
<td bgcolor="white"><font size="1" 
color="black" face="MS Sans Serif">Tab 2
<font></td>
<td bgColor="white" valign="top">
<img src="/<Computed Value>
/closetab.gif"></td>
</tr>
</table>
</td>
</tr>
</table>


<div id="Cat1Top" style="display:">

Put the information you want Tab 1 to display here

</div><div id="Cat2Top" style="display:">

Put the information you want Tab 2 to display here

</div>

Add this function to the JSHeader

 function doCategories(tmpid,tmpclass) {
//Check that the element being
 used have the class of category.
//
  if (tmpclass == "Category") {
//get the id for the section that 
want to be displayed.
   var topTargetID = tmpid + "Top";
   var topTargetElement = document.all(topTargetID);
//get the id for the ontab that 
want to be displayed.
   var onTabTargetID = tmpid + "TabOn";
   var onTabTargetElement = document.
all(onTabTargetID);
//get the id for the offtab that want to be hidden.
   var offTabTargetID = tmpid + "TabOff";
   var offTabTargetElement = 
document.all(offTabTargetID);
//hide all of the tables sections to start with.
   Cat1Top.style.display = "none" ;
   Cat2Top.style.display = "none" ;
//hide all of the tab with out links. 
   Cat1TabOn.style.display = "none" ;
   Cat2TabOn.style.display = "none" ;
//show all of the tab with links.
   Cat1TabOff.style.display = "" ;
   Cat2TabOff.style.display = "" ;
//display the relevent table section.
  if (topTargetElement.style.display == "none") {
   topTargetElement.style.display = "";
  } else {
   topTargetElement.style.display = "none";
 }
//display the relevent ontab section.
  if (onTabTargetElement.style.display == "none") {
   onTabTargetElement.style.display = "";
  } else {
   onTabTargetElement.style.display = "none";
 }
//display the relevent offtab section.
  if (offTabTargetElement.style.display == "none") {
   offTabTargetElement.style.display = "";
  } else {
   offTabTargetElement.style.display = "none";
 }
 }
 }