The tabManager is nothing but a JavaScript-class. Its use is fairly simple and for standard tabbed-panels doesn't even require programming knowledge. Turning some DIV-elements into tabbed-panels is no big deal; include the javascript-file, set some css-directives and initialize the tabManager. Although being such simple in implementation tabManager comes with some useful functionality.
Contrary to existing similar tools, you don't need to define a link-list of any sort to get your tabbed-panels. Adding Panels is enough to get it working. Easy, isn't it?
Unobtrusive JavaScript seems to be the new buzzword used in any other application. Unobtrusive JavaScripts are built to enhance websites if the browser accepts javascript and does not mess up the page entirely, if the browser declines javascript. It also stands for a clean cut between markup, style and functionality. In my opinion unobtrusive javascript should even go a step further; get encapsulation of the different tools right, so they don't mess up each others functionality.
For the simplest of all possibilities you can place another <div>-element around your <div>-elements. Assign an ID to the outer <div>-element and import tabManager. All (first-level) <div>-elements will be importet an automatically added to the tab-navigation.
It's possible to add an remove new tabs on runtime. This makes it very easy to extend your tabbed-panels as you wish. Objects already registered in DOM-tree will be set as child of tabManager.
To get to an even higher level of versatility, tabs can be moved to other positions within a tabbed-panel. This way you can get your tabs into your favoured order.
To make tabManager usable for interactive interfaces, I added events. You can have the user confirm the switch to another tab, or initiate a HTTP-request, for example.
There are quite a few reasons to disable and enable a tab during runtime. If a tab is disabled, it is not possible to switch to this tab what so ever.
Specify a link pointing to an anchor, let's say #tmNext and tabManager will make the link to switch to the next tab.
If an anchor is set to jump to, tabManager will display the corresponding tab on page load automatically.
You can define accesskeys for each tab. Especially Interfaces which will be used frequently will benefit from this.
You can create multiple autonomous tabbed-panels on the same page. tabManager doesn't use any global functions or variables, so it is perfectly fine to use multiple instances.
Yes! you can even nest one tabManager inside the other. There is no limit to the depth of nested tabbed-panels.
tabManager doesn't care about good-looking websites. Controlling style is reduced to setting css-classes. If no css is specified, the whole thing will look like the html presets.
Since using css you can have tabManager look like mostly anything you can think of. The example comes with the sliding-doors technique implemented, changing colors is trivial.
The dynamically generated tabBar can either be set to be displayed above or below the tabPanels. It's a stylesheet thing to have your tabs look nice above or below the tabPanels, or even move the tabs to the left or right of the tabPanels.
For some reasons apple's Safari needs some extra care to display tabPanels with the correct width. Because of this tabManager sets the width of the tabPanels to the width of the previously active tabPanel. In spite of this adjustment your stylesheets should work out correctly.
Here you will get an idea of how easy the integration of tabManger actually is. The following examples are shortened to minimize the length of the code.
<html>
<head>
<script type="text/javascript" src="tabManager.js">
<script type="text/javascript">
window.onload = function()
{
var tm = new tabManager('myPanel', true);
};
</script>
</head>
<body>
<div id="myPanel">
<div>
First panel<br>
Tabname: Tab 0
</div>
<div>
<!-- give autoimport some infos about this tab -->
<dl title="tabinfo">
<dd title="name">second</dd>
</dl>
Second panel<br>
Tabname: second
</div>
<div>
<!-- give autoimport some infos about this tab -->
<dl title="tabinfo">
<dd title="name">third</dd>
<dd title="title">click me</dd>
</dl>
Second panel<br>
Tab-name: third<br>
Title of tab-link: click me
</div>
<div>
<!-- give autoimport some infos about this tab -->
<dl title="tabinfo">
<dd title="name">fourth</dd>
<dd title="title">click me</dd>
<dd title="accesskey">s</dd>
</dl>
Second panel<br>
Tab-name: fourth<br>
Title of tab-link: click me<br>
Accesskey of tab-link: s
</div>
</div>
</body>
<html>
<script type="text/javascript" src="tabManager.js">
<script type="text/javascript">
window.onload = function()
{
var tm = new tabManager('myPanel', true);
/*
add eventhandler which gets called before
switching away from tab 0
*/
tm.addOnSwitchFrom(0, function(){ return true; } );
};
</script>
To get a better idea of all the functionality you can play around a bit. tabManager playground
Since JSDoc doesn't do what i expected it to do, i created the api manually - sorry for any inconvinience.
Copyright (c) 2006, Rodney Rehm.
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions
are met:
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
If you like it - use it! I spent about 3 days to create the tabManager and everything around it. You can implement this tool in your private page or a comercial Projekt with the same conditions. Make up for the time I saved you with a little donation.