SimpleTabs.js

(function($){

// Simple tabs
// Example markup:
//
// <div data-tabs="tabs">
//   <ul>
//     <li data-tabs="title" data-tabs-id="fish">...</li>
//     <li data-tabs="title" data-tabs-id="egg">...</li>
//   </ul>
//   <div>
//     <div data-tabs="tab" data-tabs-id="fish">...</div>
//     <div data-tabs="tab" data-tabs-id="egg">...</div>
//   </div>
// </div>
//
$.fn.tabs = function(){
  
  var TabSet = function($elem){
    var self = this;
    this.$elem = $elem;
    $elem.bind('select-tab', function(evt, id){
      self.select(id);
    });
    this.select(this.titles().eq(0).attr('data-tabs-id'));
  };
  TabSet.prototype = {
    select: function(id){
      this.titles().not('[data-tabs-id='+id+']').removeClass('current').end().
                    filter('[data-tabs-id='+id+']').addClass('current');
      this.tabs().not('[data-tabs-id='+id+']').hide().end().
                  filter('[data-tabs-id='+id+']').show();
    },
    titles: function(){
      return this.$elem.find('[data-tabs=title]');
    },
    tabs: function(){
      return this.$elem.find('[data-tabs=tab]');
    }
  };
  
  this.each(function(){
    new TabSet($(this));
  });
  
  return this;
};


})(jQuery);