Rudimentary jQuery tabs demo
(return to main page)
These links demonstrate that one can change tabs via controls other than the tab headers
switch to tab 1,
switch to tab 2,
switch to tab 3,
switch to special/hidden tab
Welcome to the BogoTabs plugin for jQuery.
What jQuery needs now is yet another tabbed interface plugin. Yeah, right!
This plugin was inspired by the idTabs plugin, but i had problems
with that plugin in the Konqueror browser and i find its overall
technique a bit iffy because it uses implied tab identifiers instead of
explicit ones, making the code more difficult to understand/maintain (IMO).
- Easy to use. IMO, easier than the idTabs, but also less feature-rich.
- Well-documented: the source file is over 50% documentation.
- Supports an callback to be called when a tab is activated.
- Can be configured to show a tab other than the first one at startup.
- Allows programmatically selecting a tab via an activateTab() function attached to
the DOM element. e.g.
- Supports "hidden tabs", which have no selector button but which can be shown
via "manually" calling the tab's activateTab() function.
That's about it, really. Not many features, but that also means not much room for bugs.
- Nesting of tabs does not work properly - the tab labels show up in the wrong place.
It can be made to work if you implement custom buttons for each tab.
- There is no direct support for having the tab labels on the bottom or side, but this
can easily be accomplished by creating custom buttons and attaching a click() handler
to them which activates a given tab.
- Does not degrade gracefully when JS is disabled because of how the links are generated.
Technically speaking, IMO no tabbed interface can degrade "gracefully" because in a non-JS
environment, all of the tabs are visible all of the time. While that does allow bots to
crawl the text, it does not provide a useful UI (IMO). In the case of this implementation,
a bot would simply not get the tab buttons, since those are 100% generated via JS.
Sample style sheet code for use with bogotabs - download
or browse it here:
(Appears to not work in Konqueror?)
This tab's selection button is suppressed (not generated), and therefore this
tab is only accessible via the "programmatic approach", which requires the client code
to call $('#HiddenTab').activateTab().