<html><style type="text/css">
body {
background-color: #9900FF;
}
</style>
<body>
</body>
<h1>Zero</h1>
<h1>Zero</h1>
<h1>Zero</h1>
<h1>Zero</h1>
<h1>Zero</h1>
<h1>Zero</h1>
<h1>Zero</h1>
<h1>Zero</h1>
</html>
Nathan
Its certainly a novel approach to html?
- Maurice
-----Original Message-----
From: web400-bounces@xxxxxxxxxxxx [mailto:web400-bounces@xxxxxxxxxxxx] On
Behalf Of Nathan Andelin
Sent: 01 October 2008 20:10
To: Web Enabling the AS400 / iSeries
Subject: Re: [WEB400] Tabs in HTML Pages
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.
midrange.com
