Dynamic JavaScript Tabs
This is some code that I wrote to create dynamic tabs. I use it for forms where I have a lot of fields and a good percentage are “advanced” or otherwise not important enough to have visible immediately. The CSS is based on ideas from Silverorange Labs and the JS code is mine. The code is released under the MIT license which basically means you can do what you like with it as long as you don’t blame me!
Basic tutorial
It’s not hard to use and I’ve included a sample html file in the zip archive. The basics are:
<div id="tab-container">
<div class="tab-content">
<h1 class="tab" title="title for page 1">Page 1</h1>
<p>This is the content of tab 1</p>
</div>
<div class="tab-content">
<h1 class="tab" title="title for page 2">Page 2</h1>
<p>This is the content of tab 2</p>
</div>
<div class="tab-content">
<h1 class="tab" title="title for page 3">Page 3</h1>
<p>This is the content of tab 3</p>
</div>
</div>
<script type="text/javascript" src="abs.js"></script>
i.e. you need a “tab-container” and then each tab is contained in a “tab-content” and we use a “tab” to sort out the title. The nice thing is that it degrades really nicely!
Update: I’ve created a separate page to hold the download link
Arrgghh,
Anyone know how to have 2 different sets of tabs on the same page.
It would be much appreciated if someone could tell me.
Funnily enough, I received a patch for just this situation earlier this month. I haven't had a chance to look at it at all, yet so I'm just putting it up directly so that you have look at it.
Patch to Provide Multiple Sets of Dynamic Tabs
Is there anyway to set an active tab? lets say you wanted a form in one tab and when the user presses submit, you want them to stay on that tab.
emehrkay: the last line of tabs.js controls which tab is set to active.
i.e. ActivateTab(0); set's the first tab as active, but ActivateTab(1); would set the second tab as the active one.
What do I do with the patch file, there seems to be bits everywhere and loads of @'s and +'s .
Is there some sort of program i use to interpret this file ?
Use patch (http://www.gnu.org/software/patch/patch.html)
basically you do:
patch < dynamic_tabs_multi.patchin the directory where the original dynamic tabs files are.
Rob: how would i make it dynamic? like could i add an onclick even to the h1 tag that sets ActivateTab() to its number, incase the page is refreshed?
what happens if I am a windows user ?
Anychance you could run it and the re-zip it for me :)
The way we do it at work is to call ActivateTab() at the bottom of the php template like this:
<script language="javascript"> ActivateTab(<?php echo $tab_id ?>); </script>Rob: easy way to handle it. thanks
Jimmy: Version 1.0.2 now available here!