methodCallStyle.js

/*
On the page, there will be a number of tabs. Each of the tabs will correspond with a panel.
When a tab is selected, it becomes "active" -- the previously active tab becomes inactive.
When a tab becomes active, its associated panel is shown. When a tab becomes inactive, its
associated panel is hidden.
By default, the first tab is active when the tabs are created.
*/
 
var tabs = new $.Widget("ul.tabs");
 
// Base events
var tab = tabs.newType("tab", "a");

tab.listen({
  selected: function(tab) {
    tabs.activeTab.deactivate();
    tab.activate();
    tabs.activeTab = tab;    
  },
  deactivate: function(tab) {
    tabs.panels.get(tab).hide();
  }
})

tabs.listen("default", "initialize", function() {
  tabs.list.first.activate();
});

// Default display logic
var panel = tabs.newType("panel", "div");

panel.listen("default", {
  show: function(panel) {
    panel.show();
  },
  hide: function(panel) {
    panel.hide();
  }
});

tab.listen("default", {
  activate: function(tab) {
    tab.addClass("active");
  },
  deactivate: function(tab) {
    tab.removeClass("active");
  }
});
 
// Setup
tabs.list = new tabs.Array;

tabs.find("a").each(function() {
  tabs.panels = new tabs.Hash
  tabs.panels(this, $(this.attr("href"));
  tabs.list.push(this);
}).click(function() {
  tab(this).selected();
});

/* AJAX EXTENSION */

panel.listen("ajax", "show", function(panel) {
  panel.html("<div class='loading'></div>").load(panel.attr("data-href"));
});

/* HASH EXTENSION */

tabs.stopListening("default", "initialize")
  .listen("hash", "initialize", function() {
    tab("a[href='" + window.location.hash + "']").activate();
  })

tab.listen("hash", "activate", function(tab) {
  window.location.hash = tab.attr("href");
});