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
Like this article?
December 20th, 2005 at 16:53 #
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.
December 20th, 2005 at 17:10 #
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
December 21st, 2005 at 13:26 #
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.
December 21st, 2005 at 13:30 #
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.
December 21st, 2005 at 16:25 #
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 ?
December 21st, 2005 at 16:45 #
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.
December 21st, 2005 at 16:53 #
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?
December 21st, 2005 at 16:55 #
what happens if I am a windows user ?
December 21st, 2005 at 16:58 #
Anychance you could run it and the re-zip it for me :)
December 21st, 2005 at 16:59 #
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>December 21st, 2005 at 17:10 #
Rob: easy way to handle it. thanks
December 21st, 2005 at 17:12 #
Jimmy: Version 1.0.2 now available here!