Skip to content

Instantly share code, notes, and snippets.

@JiLiZART
Created April 29, 2013 13:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JiLiZART/5481650 to your computer and use it in GitHub Desktop.
Save JiLiZART/5481650 to your computer and use it in GitHub Desktop.
Very light tabs div.tabs-container>(ul.tabs>li*3)+(div.tab*3)
/**
* @author Nikolay Kostyurin <jilizart@gmail.com>
* Very lightweight tabs
*/
;(function ( $, window, document, undefined ) {
var pluginName = 'smallTabs',
defaults = {
content: 'div.tab',
navigation: 'ul.tabs',
navigationElement: 'li',
activeClass: 'active',
easing: "swing",
animationSpeed: 600,
beforeShow: function($navEl){},
afterShow: function($navEl,$tabs,$currentTab){}
};
// The actual plugin constructor
function Tabs( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Tabs.prototype = {
init: function() {
var $wrapper = $(this.element),
notActive = ':not(.'+this.options.activeClass+')',
self = this,
$tabEls = $wrapper.find(this.options.navigation).find(this.options.navigationElement)
$tabEls.removeClass(this.options.activeClass)
.first().addClass(this.options.activeClass);
var $tabs = $wrapper.find(this.options.content);
$tabs.first().show();
$tabs.not($tabs.first()).hide();
$wrapper
.find(this.options.navigation)
.delegate(this.options.navigationElement+notActive, 'click', function(e) {
var $this=$(this);
self.options.beforeShow($this,$tabs);
$this.addClass(self.options.activeClass)
.siblings()
.removeClass(self.options.activeClass);
var $siblings = $tabs.not($tabs.eq($this.index())),
$current = $tabs.eq($this.index());
if(self.options.easing != false) {
$siblings.fadeOut(self.options.animationSpeed, self.options.easing);
$current.fadeIn(self.options.animationSpeed, self.options.easing);
} else {
$siblings.hide();
$current.show();
}
self.options.afterShow($this,$tabs,$current);
e.preventDefault();
});
}
};
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
return this.each(function () {
var $this = $(this),
data = $this.data(pluginName);
if (!data) $this.data(pluginName, (data = new Tabs( this, options )));
if (typeof options == 'string') data[options].call($this);
});
}
})( jQuery, window, document );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment