DOMtab is a JavaScript that turns a list of links connected to content
sections into a tab interface. The script removes any "back to top" links
in the section and automatically hides all but the first one when the
page is loaded. You can use as many tabbed menus on the page as you want
to.
New: If the URL of the page links directly to one of the tabs it get automatically
highlighted.
You can define with an extra class if you want previous and next links
or not.
DOMtab uses Unobtrusive JavaScript and does not have any global functions or variables. This page uses DOMtab.
To do: internal links highlighting tabs (too busy for that now)
Comment on the Blog
Donations help me buy coffee to stay awake!
back to menu
Applying DOMtab to your pages is easy, all you need is to call the
script in the head of the document:
code>
DOMtab expects the following classes and element structure to work:
60;a href="strong>t1"62;Test 1<>60;/li> <>60;a href="2"62;Test 2<>60;/li>... and so on ...]
<>60;a name=""d="trong>t1"62;Proof 1<>60;/h2> <#62;Test to prove that more than one menu is possible<> <#62;60;/p> <>60;a name=""d=""62;Proof 2<>60;/h2> <#62;Test to prove that more than one menu is possible<> <#62;60;/p> ... and so on ...]
code>
The showing and hiding of sections is achieved by reading out the hash data
of the link url and retrieving the parent element of the element with the ID the
original link points to.
The links to remove are identified via a pattern in their href attribute, preset to "#top".
If there is an element with the id domtabprintview in the document, DOMtab will
create a link to show all elements in this one.
You can change all the settings in the script itself, as all HTML expections are
parameters:
tabClass:'domtab', // class to trigger tabbing
listClass:'domtabs', // class of the menus
activeClass:'active', // class of current link
contentElements:'div', // elements to loop through
backToLinks:/#top/, // pattern to check "back to top" links
printID:'domtabprintview', // id of the print all link
showAllLinkText:'show all content', // text for the print all link
back to menu
In this version I added the option to have previous and next links
to navigate around the tabs in addition to clicking them.
If you want DOMtab to generate those, all you need to do is to
add the class "prevnext"n addition to the domtab class to
the div in question:
60;a href="1"62;Test 1<>60;/li> <>60;a href="2"62;Test 2<>60;/li> <>60;a href="3"62;Test 3<>60;/li> <>60;a href="4"62;Test 4<>60;/li> [... ad nauseam...]
code>
DOMtab then generates the following link list in each of the sections, automatically
removing the previous link in the first and the next in the last section:
< class="evnext"62;
< class="ev"62;evious<>60;/li> < class="xt"62;xt<>60;/li>code>
Once again, you can override any of these settings in the script's parameters:
prevNextIndicator:'doprevnext', // class to trigger links
prevNextClass:'prevnext', // class of the prev and next list
prevLabel:'previous', // HTML content of the prev link
nextLabel:'next', // HTML content of the next link
prevClass:'prev', // class for the prev link
nextClass:'next', // class for the next link
Both labels are set via innerHTML rather than the proper method :-). This allows you to
use images if wanted:
prevLabel:'
back to menu
Using the mandatory classes domtab for the main DIV of each menu,
and domtabs for the menu list, you can pretty much style your menus
any way you want to.
DOMtab adds the class "active" to the LI containing the currently
active link, to allow you to highlight the currently chosen tab.
The previous and next links get classes on their own, which makes
it easy to style them differently.
The showing and hiding of the sections is done via JavaScript using
display block and none. It would be pretty easy to replace this with
a styleable show and hide class, if you want to have that, please
contact me on the blog.
If you want to avoid the initial flash of all the content until the
script kicks in, you can cheat by adding the following code in the head
right after the script element with the domtab call:
;
/code>
back to menu
DOMtab is provided as-is and I don't take any responsibility for any problems
that might occur for using it.
It is free to use, but not free to resell. If you want to use DOMtab in a
commercial site/product please contact me.
back to menu
