/** * The Tabinator ~ by www.mtex.ca * * @author Chris Murphy * @version 1.01 * @copyright Copyright (c) 2008, MtexMedia * * The Tabinator is freely distributable under the terms of an MIT-style license. * -------------------------------------------------------------------------------------- * * Prototype 1.6.0.1 + Required ~ www.prototypejs.org * * NOTE: I'm using jQuery 1.2.6 from www.jquery.com to ensure the page is ready before instantiating the object. * Normally jQuery uses $ as it's call, because prototype uses the same variable follow step 3. * * SETUP: * 1. Download ProtoType and jQuery[optional] * 2. Insert these tags between the tags of your site * * * 3. If you are using jQuery add this tag 'after' the above tags. * * * USAGE: * *

Save
Save

* * * *

My Message

*

Some spinning working graphic

*

The panel that I want to hide when the button is clicked

*

Another panel to show when I click on 'Save'

* */ var Tabinator = Class.create({ initialize: function(ulId) { // get all li elements in the ul this.tabs = $(ulId).select('li'); // active element this.activePanel = null; // give found elements an id and set active tab for (i = 0; i < this.tabs.length; i++) { this.tabs[i].observe('click', this.clicked.bindAsEventListener(this)); if(this.tabs[i].hasClassName('active')) this.activePanel = this.tabs[i]; } // hide loading panel if($('panelLoading') != null) $('panelLoading').hide(); // show active panel this.togglePanels(this.activePanel); }, clicked: function(obj) { var element = obj.element(); this.toggleTabs(element); this.togglePanels(element); if(element.readAttribute('action') != null) eval(element.readAttribute('action')); }, togglePanels: function(activeElement) { if (activeElement != null) { if (activeElement.readAttribute('show') != null) { //hide all but var showAttrib = activeElement.readAttribute('show'); // parse attribute separated by commas ("attrib1,attrib2,...") var showPanels = showAttrib.split(","); for (i = 0; i < this.tabs.length; i++) { var hideAttrib = this.tabs[i].readAttribute('show'); var hidePanels = hideAttrib.split(","); for (j = 0; j < hidePanels.length; j++) { for (k = 0; k < showPanels.length; k++) { if (hidePanels[j] != showPanels[k] && $(hidePanels[j]) != null) $(hidePanels[j]).hide(); } } } //then show for (i = 0; i < showPanels.length; i++) { if($(showPanels[i]) != null) $(showPanels[i]).show(); } } //then hide if (activeElement.readAttribute('hide') != null) { var hideAttrib = activeElement.readAttribute('hide'); // parse attribute separated by commas ("attrib1,attrib2,...") try { var panels = hideAttrib.split(","); for (i = 0; i < panels.length; i++) { if ($(panels[i]) != null) $(panels[i]).hide(); } } catch(ex) {} } } }, toggleTabs: function(activeElement) { for (i = 0; i < this.tabs.length; i++) { if(this.tabs[i] != activeElement) this.tabs[i].removeClassName('active'); } activeElement.addClassName('active'); } });