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
Center
This little pluggy centers an element on the screen using either fixed or absolute positioning. Can be used to display messages, pop up images etc.
Numeric DL
This tiny plug-in numbers definitions in a definition-list if there are more than one definition for a term. Can be useful for FAQs, actual lists of d...
Max Length Form Controls
Gives form-controls with a 'maxlength-XXX'-class a max-length and prohibits user from entering more than set amount. It also displays number of charac...
