Sample Tab Class for use with moo4q

Tab.js

var Tabs = new Class({
  
  Implements: [Options, Events], 

    options: {
      nav: '.nav',
      content: '.section',
      currentClass: 'current'
    },

  jQuery: 'tabs', // namespace for new jQuery prototype method

  initialize: function(selector, options){
    this.setOptions(options); // inherited from Options, works like jQuery.extend();
    this.container = jQuery(selector); // cache the jQuery object
    this.tabs = this.container.find(this.options.tab);
    this.contents = this.container.find(this.options.content);
    this.currentTab = jQuery(this.contents[0]);
    // proxy some methods so we can easily unbind them
    // and having events handled in their own methods
    // makes extending much easier
    this.proxied = {
      tabClick: jQuery.proxy(this.tabClickHandler, this)
    };
    this.setup().attach(); // can chain if methods return `this`
    jQuery(this.tabs[0]).trigger('click', true);
  },
  
  setup: function(){
    if (this.container.css('position') != 'absolute') {
      this.container.css('position', 'relative');
    }
    this.contents.hide();
    return this;
  },

  attach: function(){
    this.tabs.bind('click', this.proxied.tabClick);
    return this;
  },

  detach: function(){
    this.tabs.unbind('click', this.proxied.tabClick);
    return this;
  },

  tabClickHandler: function(event, force){
    event.preventDefault();
    var index = this.tabs.index(event.currentTarget);
    if (force || this.contents.index(this.currentTab[0]) != index) this.show(index);
  },

  show: function(index){
    this.fireEvent('show'); // like a callback
    this.tabs.removeClass(this.options.currentClass);
    jQuery(this.tabs[index]).addClass(this.options.currentClass);
    this.currentTab.hide();
    this.currentTab = jQuery(this.contents[index]).show();
    return this;
  }

});


// usage

$('#pane').tabs({tab: 'a', content: '.section'});

Tabs.Ajax.js

Tabs.Ajax = new Class({
  
  Extends: Tabs, // makes this a sub class of `Tabs`
  
    // can add some new options w/o losing the ones from Tab
    options: {
      loadingHTML: '<p>Loading...</p>'
    },
  
  // give it a new jQuery prototype method
  jQuery: 'ajaxTabs',

  // change a single method to add wildly different functionality
  show: function(index){
    var href = jQuery(this.tabs[index]).attr('href');
    // detach tabs and prevent default browser behavior
    this.detach().tabs.bind('click.stop',function(event){
      event.preventDefault();
    });
    // this.parent calls the `show` method of the parent class
    this.parent(index);
    var self = this; // for use in ajax callback
    this.currentTab.html(this.options.loadingHTML).load(href, function(){
      self.attach().fireEvent('ajaxComplete').tabs.unbind('click.stop');
      // could have used $.proxy, but storing `this` in `self` is easy enough
    });
    return this;
  }

});

usage.js

$('#pane').tabs({tab: 'a', content: '.section'});

// add some events after creating an instance
$('#pane').tabs('addEvent', 'show', function(){
  $(document.body).toggleClass('toggle');
});

$('#pane1').ajaxTabs({
  tab: 'a', 
  content: '.section',
  loadingHTML: '<p class=loading>Loading<br><br><img src=loading.gif></p>',
  // or add some events in your options when you first create the instance
  onShow: function(){
    this.container.css('opacity',0.5);
  },
  onAjaxComplete: function(){
    this.container.css('opacity','');
  }
});