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

A good start before reading this is the previous DHTML Tabbed Tables article which can be found here. This article improves on that demo by adding the ability to have tabbed tables within tabbed tables.

You should note that in my opinion the demo is 'ugly' - so its up to you to change the style sheet with better colour choices etc.

Unfortunately this demo only works with Internet Explorer - I will create a cross browser version shortly.

Creating a Tabbed Table

The tabbed table form is not too complicated 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:

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.

Adding Sub Tabbed Tables

Adding tabbed tables within tabbed tables is only a little bit more complex than creating the main tabbed table - but only because in this version I think it is fiddly.

For each Tabbed Table you wish to have a sub tabbed table you have to enter the tab titles seperated by commas as you can see above. For each table that you do not want sub tabs then enter 'None'.

In addition, we have to specify the 'ID' that is used within the CSS and the HTML for the HTML tables used for each sub tab's table. Again if we do not want a sub tabbed table we need to enter a 'n'.

In the same way we have to create the HTML for the main tabbed tables, we also have to repeat this for the sub tabbed tables - only we need to use the ID that we have specified in the Sub Tab ID column with a number after it to specify the order - ie the first HTML table for the first sub tabbed table would have an id - 'A1'.

eg:

We also have to add CSS information for each sub tabbed table to specify where to position it etc

eg:

In future versions you will not need to do this - I will have a properties box within the Notes Form.

I have created a sample in the demo database, which when displayed in Internet Explorer should look like this:

You can get to this sample by entering http://server/path/database.nsf/documents/testtabs.htm in your browser or going to the Notes Document inside the database and selecting the 'Action' menu and 'Preview Design Element in Browser'.

As usual please feel free to play around and to use whatever you want within your own applications.

Questions? - steve.castledine@projectdx.org