Skip to content

Instantly share code, notes, and snippets.

@RohitRox
Created July 18, 2012 11:24
Show Gist options
  • Save RohitRox/3135685 to your computer and use it in GitHub Desktop.
Save RohitRox/3135685 to your computer and use it in GitHub Desktop.
Very small re-usable tabbifying jquery plugin
// Very small re-usable tabbifying jquery plugin , @roxxypoxxy
// Usage
/**
The list
<ul class="my-tabs">
<li rel="div1">Div One</li>
<li rel="div2">Div Two</li>
</ul>
The divs
<div id="div1">Content One</div>
<div id="div2">Content Two</div>
Mapping: rel to id
The call
$('.my-tabs').tabbie();
//to add custom active class
$('.my-tabs').tabbie({active_class='active'});
The Hook
//hook your function on tab change
$('.my-tabs').tabbie({ change_call: function(){ alert('ok'); } });
//Honey
//you can get the current selected item
$('.my-tabs').tabbie({ change_call: function(){ console.log(this); } });
**/
(function($){
$.fn.tabbie = function(options) {
// the defaults
var defaults = {
active_class : 'current'
};
var options = $.extend(defaults, options);
// main logic here
return this.each(function() {
$list = $(this).find('li');
$list.first().addClass(options['active_class']);
$list.not('.'+options['active_class']).each(function(){ $div_rel = $(this).attr('rel'); $('#'+$div_rel).hide(); });
$list.click(function(){
$current = $(this).siblings('.'+options['active_class']);
curr_div = $current.attr('rel');
$current.removeClass(options['active_class']);
$(this).addClass(options['active_class']);
show_div = $(this).attr('rel');
$('#'+curr_div).hide();
$('#'+show_div).show();
callback = options['change_call']
if ( callback != undefined && typeof callback == 'function' ){
callback.call(this);
}
});
});
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment