The DHTML Outlook Category Bar mimics the scrolling selection bar on the Microsoft Outlook application. This is a very handy navigational control which allows different categories with options to be selected and displayed in a compact space.
Notes on this example and implementing the Outlook Category Bar:
In this example, I've simulated the icons and categories on the Outlook Bars exactly, to show how similar the DHTML control can look and feel against the real thing. The icons are small (2kb each) and should load quickly; a tip is to put only a few icons on the first, 'opened' bar (i.e. 'Other' in this case) so they load quickly; the other hidden (unopened) bars will be loading their icons quietly in the background... Should speed be of essence, however, then you may leave them out - as with the 'Links' tab which has no graphics. Most of the icons are hyperlinked to this page, so don't be puzzled if nothing happens when you click the icons... The 'Links' page works and has links to my favorite web haunts. This application works properly in Microsoft Internet Explorer only. On the tabs ('Outlook', 'Mail', 'Other', etc.), NetScape Navigator does not allow an 'onclick' event on a <td> tag for javascript to open and close a tab when the user clicks on it. This DHTML widget uses Cascading Stylesheets and Javascript. I also use it with ASP to pass parameters to pages, and cut out having to have a separate .htm page for each of the tabs and their options. I just have one for the tabs and one for the options with big 'Select Case' statements... I find it's easier to track and modify... you could even database the categories and options for a web application. About the author:
Richard Him Lok is the Project Coordinator of Technology at South Africa's largest cellular service provider, Vodac. Richard was the lead developer of the company's fully ASP-based website (www.vodac.co.za) which features the cellular industry's first web-based cellphone account manager with online itemised billing and an SMS phonebook. Richard has also developed an online credit vetting web application, a web-based corporate cellular reporting application and is currently working on a fully DHTML Intranet system.On the Inside DHTML website, this author also wrote the "DHTML Dialog Boxes" application.