Here's a new "download and example" for those of you that wanted a real-world example of my Context-Sensitive Tabbed Navigation in the Lotus Notes Client method!

Enjoy!

So with me currently looking for contracts, I've had the opportunity to work on some back-burner projects and exercises that I've been holding off on for the past several months. One of these projects was the re-development of my DHTML Menu Builder (a v2.0 if you will). One of the goals of this version is to greatly clean up the web-based user interface for the application and (quite frankly) make it look like more of an application than an exercise that happens to produce a usable DHTML menu.

So the latest web UI called for a tabbed interface for the application - allowing you navigate through a large form in a smaller container/footprint. While this was a simple task, I wanted to streamline the code to be as light and expandable as possible (as I'm certain that the UI of v2.0 will be ripped apart and used in other applications). So I started first by doing a little research.

Did you know that it's slower to change element styles via Javascript than it is to simply change/append a className? I didn't either! So, armed with this new information, I decided that I was going to do the following with my tabs: All tabs would have the className of "tab_inactive" except the default tab, which would have the className "tab_active". Onclick of the tab, I would simply cycle through all active tabs (in case there were multiple active tabs onload), and set their className to "tab_inactive". My onclick function would designate which tab was to be set as an active tab, so my function would then take this designation and set the element's className to "tab_active". Pretty simple stuff really, and pretty simple to accomplish once you think about it that way. So, I then added the javascript from Robert Nyman's Ultimate getElementsByClassName which would be used to cycle through the DOM document and grab elements that had the "tab_active" className, and with this created a very simple function (seen below):

function settab(atab) {
var myArray = getElementsByClassName(document, "li", "tab_active");
for ( var i=0, len=myArray.length; i<len; ++i ){
myArray[i].className = 'tab_inactive';
}
atab.className = 'tab_active';
}

And now, for my HTML markup. We will define the active and inactive tabs to start, as well as the to-be-active tab onclick in our settab() function:

<ul id="tabbednavigation">
<li class="tab_active" id="tab1" onclick="settab(document.getElementById('tab1'));">Tab 1</li>
<li class="tab_inactive" id="tab2" onclick="settab(document.getElementById('tab2'));">Tab 2</li>
<li class="tab_inactive" id="tab3" onclick="settab(document.getElementById('tab3'));">Tab 3</li>
<li class="tab_inactive" id="tab4" onclick="settab(document.getElementById('tab4'));">Tab 4</li>
</ul>

Alternately, if the current element is the to-be-active tab, you can simplify this function further by utilizing this. For example: <li class="tab_active" id="tab1" onclick="settab(this);">Tab 1</li>

And now, to make this work (visually now, as the elements should have their classes swapped as per the logic defined in the settab() function), we will define the element classes in CSS. We'll create two different visual states for the tab - active and inactive:

ul#tabbednavigation {
padding-bottom: 5px;
border-bottom: 1px solid #333;
margin: 10px 5px 10px 5px;
}

ul#tabbednavigation li.tab_active, ul#tabbednavigation li.tab_inactive {
list-style: none;
padding: 5px;
margin: 0px 2px 0px 2px;
display: inline;
border: 1px solid #333;
background-color: #f1f1f1;
border-bottom: none;
cursor: pointer;
}

ul#tabbednavigation li.tab_active {
border-bottom: 1px solid #fff;
background-color: #fff;
}

And wth all of this, you now have a fully functional location-sensitive tabbed navigation engine for your web-based UIs.

• Tab 1
• Tab 2
• Tab 3
• Tab 4