Re: Tabs in HTML Pages

[Nathan Andelin <nandelin@xxxxxxxxx>]

Another report.

I chose a rather inconspicuous design for tabs because I didn't want them to detract from data elements that might be in an application.  And I generally think that navigational elements should be inconspicuous.  Here's a link if anyone would like to take a look:

http://www.radile.com/rdweb/temp/tabs.html

A little forewarning.  The tabs may be inconspicuous, but the surrounding content is a bit garish and has uncoordinated coloring, because the sample was thrown together in an ad-hoc manner, to test the Javascript components, while I was developing them.

I haven't used these tabs in any real application, yet.  And probably won't do so for a while.  If you look at the frame source you'll see that tabs were added to the document in a for() loop, evoking the addTab() method:

for (i=0; i<=7; i++) {
  tab.id = i.toString();
  tab.label = 'Tab ' + tab.id;
  tabs.addTab(tab);
  tabs.frames[i].src = tab.id + '.html';
}

Again, this approach to implementing tabs in HTML pages is in contrast to using HTML or JSF or comparable tag libraries, or using object literal notation, which is prevalent in major rich UI toolkits.

Basic Javascript.

Nathan.



 

----- Original Message ----
From: Nathan Andelin <nandelin@xxxxxxxxx>
To: Web Enabling the AS400 / iSeries <web400@xxxxxxxxxxxx>
Sent: Wednesday, October 1, 2008 8:24:08 AM
Subject: Re: [WEB400] Tabs in HTML Pages

I'd like to share an update on my Tabs project.  I hope it will be interesting.  I created 2 new code files:

wltabs.css
wltabs.js

The "wl" prefix identifies a particular style of tab.  I think that when people get into UI widget development they underestimate the amount of time and effort it takes to come up with an appropriate stylesheet.  I'm not really trained as an artist, and the styling doesn't come easily to me.  In this case, wltabs.css contains references to the colors and images and such to provide shape to tabs and to implement visual transitions for hover effects and such.  I think I spent more time on the .css file than the .js file.

The .js file implements a couple objects that are instantiated at runtime, as follows:

var tab = new Tab();

Once the tab reference is created, you can set it's properties like so:

tab.id = 'id';
tab.label = 'Tab 0';
tab.width = '80'

var tabContainer = new tabContainer('tabParent', 'contentParent');

Where 'tabParent' and 'contentParent' identify HTML parent elements for the tabs and tab content respectively.  I generally use HTML table cells or DIV objects as parents.

Add a tab to a the container by evoking the addTab() method as such:

tabContainer.addTab(tab);

To select and activate a tab, evoke:

tabContainer.select('id');

Some of the things I like about this approach is that I can use Dreamweaver and HTML for most page layout, but can add tabs via javascript when the page loads, or triggered by some other event.  If I change tab styling or visual effects sometime later, the new effects will automatically be adopted by every page that implements the interface, without any changes to HTML.

One of the nice things about Javascript is that I can extend the Tab interface in the future via new properties and methods and styles without having to recompile or change existing code.

This is still a work in process, so if you'd like to make suggestions, I'd be grateful.  At least it kindof shares my thought process, which I hope is interesting to some.

Nathan.