Super Simple Tabs 1.4

Created Thursday 1st of January 1970 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)

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. You can set the selected tab, the show and hide animation as well as the duration through the config argument.

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

Content 1
Content 2
Content 3

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 (conf) {
    var 
config jQuery.extend({
        
selected:    1,                 // Which tab is initially selected (hash overrides this)
        
show:        'show',         // Show animation
        
hide:        'hide',         // Hide animation
        
duration:    0,                // Animation duration
        
callback:    function () {}    // Callback after tab has been clicked
    
}, conf);

    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 ((
1) === config.selected) {
                
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;
                }
            }

            
// Only continue if the clicked element was an in page link
            
if (link) {
                var 
selected ul.find('a.selected');

                if (
selected.length) {
                    
// Remove currently .selected, hide the element it was pointing to
                    
jQuery(selected.removeClass('selected').attr('href'))[config.hide](config.duration, function () {
                        
// Then show the element the clicked link was pointing to
                        
jQuery(link.attr('href'))[config.show](config.duration, function () {
                            
config.callback(link.attr('href'));
                        });
                    });

                    
link.addClass('selected');
                }
                else {
                    
jQuery(link.addClass('selected').attr('href'))[config.show](config.duration, function () {
                        
config.callback(link.attr('href'));
                    });
                }

                
// Update the hash
                
superSimpleTabsUpdateHash(link.attr('href'));

                return 
false;
            }
        });

        
// If a hash is set, click that tab
        
var hash window.location.hash;

        if (
hash) {
            
// We can't simply .click() the link since that will run the show/hide animation
            
jQuery(ul.find('a').removeClass('selected').attr('href')).hide();
            
jQuery(ul.find('a[href="' hash '"]').addClass('selected').attr('href')).show();
            
config.callback(hash);
        }
    });
};

// http://stackoverflow.com/questions/1489624/modifying-document-location-hash-without-page-scrolling#answer-1489802
function superSimpleTabsUpdateHash (hash) {
    
hash hash.replace( /^#/, '' );
    
var fxnode = $( '#' hash );
    if ( 
node.length ) {
      
fx = $( '<div></div>' )
              .
css({
                  
position:'fixed',
                  
left:0,
                  
top:0,
                  
visibility:'hidden'
              
})
              .
attr'id'hash )
              .
appendTodocument.body );
      
node.attr'id''' );
    }
    
document.location.hash hash;
    if ( 
node.length ) {
      
fx.remove();
      
node.attr'id'hash );
    }
}

Download

Plug-in

Requires

blog comments powered by Disqus

Random jQuery Plug-ins

  • Vibrate

    This plug-in makes any element you want "vibrate" every now and then. Can be used in conjunction with blink for maximum annoyance!

    Details

  • Live Validation

    Use this plug-in to add live validation to any form on your page. The plug-in indicates whether a form control is valid or not by switching between an...

    Details

  • 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...

    Details

More Plug-ins

Recent Comments

Powered by Disqus
Page cached. Loaded in: 0.0276 second(s).
Last DB change: 2012-04-02 11:06:05
Last file change: 2012-04-25 20:30:39
Cache created: 2012-05-18 06:52:23