|
This document will go through the database
I have provided you in the downloads
section of this site. I will be skipping
any design information I provided in the previous
DHTML menus articles.
Pages
These are pretty much the same as the menu
demo, only the javascript api is entitled tabsapi.js.
Forms
The tabbed table form is actually very simple
and consists of the following setup table and
then a html contents field.
Its very simple - for each tab you require
you put an entry in the Tab Titles column, as
shown above. You can also have scrolling tabs.
This can be configured by specifying the maximum
tabs to display at a time in the Max Tabs field.
Once the above is done, then you only need
to configure the content for each of the tabs.
In my demo, I have simply placed html within
the contents field for each tab structured like
this:
<table id="DATA1"
class="datatable">
<tr>
<td valign='top'>
<table class="datatable">
<tr>
<td> Tabbed Table1 </td>
<td><img src=../prdx.gif></td>
</tr>
</table>
</td>
</tr>
</table>
The key part being the table 'id'. Each table
has to have an id DATA1,DATA2,DATA3 etc. This
is how the javascript code knows which table
to hide and show when the tabs are clicked.
You can also use standard Notes generated tables
in your own applications - by giving them an
ID in the design properties as so:
When the above has been done, you will get
a resulting web page will then look like this:
The advantages of this method over standard
Notes web tabbed tables is the fact that there
is not a reload from the server for each tab
click, and the look and feel is more editable
by changing the parameters in the global. css
page. The positions can also be changed within
the global.css file.
Questions? -
steve.castledine@projectdx.org
|
