Super Simple Tabs 1.1
Created Thursday 17th of September 2009 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)
Please have a look at the "Other Resources" for bug reports or further help on jQuery. Do not post bug reports or feature requests as comments to unrelated articles. If bug reporting on bugtracker.a-framework.org fails, e-mail me.
What it Does
This is an extremely basic tabs-plugin which allows you to create tabbed content from the ever-so-common list of in-page-links. The plug-in takes one argument; 'selected', which allows you to set which tab should be selected by default. It defaults to the first tab in the list.
How to Use
jQuery('ul.tabs').superSimpleTabs(); would make every ul with the class 'tabs' hide show the content its links are pointing to.
Example Code
HTML
<div id="jquery-super-simple-tabs-example">
<ul>
<li><a href="#jquery-super-simple-tabs-example-1">Content 1</a></li>
<li><a href="#jquery-super-simple-tabs-example-2">Content 2</a></li>
<li><a href="#jquery-super-simple-tabs-example-3">Content 3</a></li>
</ul>
<div id="jquery-super-simple-tabs-example-1">
Content 1
</div>
<div id="jquery-super-simple-tabs-example-2">
Content 2
</div>
<div id="jquery-super-simple-tabs-example-3">
Content 3
</div>
</div>
JS
jQuery('#jquery-super-simple-tabs-example ul').superSimpleTabs();
Source Code
jQuery.fn.superSimpleTabs = function (selected) {
var sel = selected || 1;
return this.each(function () {
var ul = jQuery(this);
var ipl = 'a[href^=#]';
// Go through all the in-page links in the ul
// and hide all but the selected's contents
ul.find(ipl).each(function (i) {
var link = jQuery(this);
if ((i + 1) === sel) {
link.addClass('selected');
}
else {
jQuery(link.attr('href')).hide();
}
});
// When clicking the UL (or anything within)
ul.click(function (e) {
var clicked = jQuery(e.target);
var link = false;
if (clicked.is(ipl)) {
link = clicked;
}
else {
var parent = clicked.parents(ipl);
if (parent.length) {
link = parent;
}
}
if (link) {
var selected = ul.find('a.selected');
if (selected.length) {
jQuery(selected.removeClass('selected').attr('href')).hide();
}
jQuery(link.addClass('selected').attr('href')).show();
return false;
}
});
});
};
Random jQuery Plug-ins
Form Hints
Using this plug-in you can add a descriptive hint to any form-control you may have on your site.
Add a hint by giving the form-control a title-attri...Show Password
This little plug inserts a "View password"-checkbox next to inputs of type password that allows the user to toggle the password's visibility. When the...
Slide Presentation
A sort of slide/presentation kind of plug-in. Displays sliding images with text floating on top. This one's pretty specific but perhaps someone will f...
