/* * tabswitcher.js -- Version 06-May-2006 * * Copyright (c) 2006 Jochen Kupperschmidt * * Permission is hereby granted, free of charge, to any person obtaining a * copy of this software and associated documentation files (the "Software"), * to deal in the Software without restriction, including without limitation * the rights to use, copy, modify, merge, publish, distribute, sublicense, * and/or sell copies of the Software, and to permit persons to whom the * Software is furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER * DEALINGS IN THE SOFTWARE. * * The above license is the MIT License. It was copied from the website of the * Open Source Initiative: http://www.opensource.org/licenses/mit-license.php * _ _ * | |_ ___ _____ ___ _ _ _ ___ ___| |_ * | | . | | ._| | | | . | _| . / * |_|_|___|_|_|_|___|_____|___|_| |_|_\ * http://homework.nwsnet.de/ * * History: * 23-Jan-2006: First release. * 04-Feb-2006: Rewrote it to be object-oriented, try..catch used. * 06-May-2006: Major improvements allowing for easier usage an less markup. * * This piece of JavaScript allows to switch (i.e. show one, hide the others) * between grouped XHTML elements. That kind of behaviour is widely used in * graphical applications and was adopted for use in websites. * * Include it in a website's section like this (adjust the path): * */ // A tab group class. function TabGroup(tabContainerId) { // --- initialization --- var tabBar = document.getElementById(tabContainerId); if (! tabBar) { return; } this.targetIds = new Array(); var group = this; // Find anchor elements. var aElems = tabBar.getElementsByTagName('a'); for (var i in aElems) { if (! aElems[i].href) { continue; } // Find target element's id. var id = getTargetId(aElems[i]); if (id) { this.targetIds.push(id); } // Add event handler to link. aElems[i].onclick = function () { group.show(getTargetId(this)); } } // --- functions to control content box visibility --- // Show the specified box. this.show = function (targetId, hideOthers) { if (! hideOthers) { this.hideAll(); } try { document.getElementById(targetId).style.display = ''; } catch (e) {} } // Hide the specified box. this.hide = function (targetId) { try { document.getElementById(targetId).style.display = 'none'; } catch (e) {} } // Hide all boxes of this group. this.hideAll = function () { for (var i in this.targetIds) { this.hide(this.targetIds[i]); } } // --- final preparation --- // Make the tab bar visible. tabBar.style.display = 'block'; // Display the first tab content. this.show(this.targetIds[0]); } // Return the target element id part of an anchor. function getTargetId(anchor) { try { return anchor.href.split('#')[1]; } catch (e) {} }