Dynamic TAB tables for the Web

This tip describe how to create 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";
 }
 }
 }
This was first published in April 2003

Dig deeper on JavaScript for Lotus Notes Domino

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

-ADS BY GOOGLE

SearchWindowsServer

Search400

  • iSeries tutorials

    Search400.com's tutorials provide in-depth information on the iSeries. Our iSeries tutorials address areas you need to know about...

  • V6R1 upgrade planning checklist

    When upgrading to V6R1, make sure your software will be supported, your programs will function and the correct PTFs have been ...

  • Connecting multiple iSeries systems through DDM

    Working with databases over multiple iSeries systems can be simple when remotely connecting logical partitions with distributed ...

SearchEnterpriseLinux

SearchDataCenter

SearchExchange

SearchContentManagement

Close