tabs.js

(function($) {
  
  $.fn.tabify = function(opts) {
    opts = opts || {};
    opts["default"] = true;

    var getContainer = function(anchor) {
      if(anchor.attr("href").match(/^#/)) return $(anchor.attr("href"));
      else return $(anchor.attr("rel"));
    };

    this.click(function(e) {
      var target = $(e.target);
      var tab = target.is("li") ? target : target.parents("li:first");
      var container = getContainer($("a", tab));
      $(this).trigger("selected.tabs", [tab, container]);
        
      target.trigger("clicked.tabs").blur();
      return false;
    });
    
    this.bind("startup.tabs", function(e, containers) {
      $(this).trigger("selected.tabs", 
        [$("li:eq(0)", this), containers.eq(0), true]);
    });
    
    this.bind("selected.tabs", function(e, target, container, startup) {
      opts.onTabSelect.call(this, target, container, startup);
    });
    
    for(var ext in $.fn.tabify.ext) {
      $.fn.tabify.ext[ext].call(this, opts[ext], opts);
    }
    
    this.each(function() {
      var containers = $("a", this).map(function() {
        return getContainer($(this))[0];
      });
      
      $(this).data("containers", containers);
      
      containers.addClass(opts.containerClass);
      $(this).trigger("startup.tabs", [containers]);
    });
    
  };
  $.fn.tabify.ext = {};
  
  $.fn.tabify.ext["default"] = function(value, opts) {
    $.extend(opts, {
      showContainer: function(all, self) { 
        all.removeClass("tabs-container-visible");
        self.addClass("tabs-container-visible");
      },
      selectTab:     function(all, self) {
        all.removeClass("tabs-selected"); 
        self.addClass("tabs-selected");
      },
      onTabSelect:   function(target, container, startup) {
        opts.selectTab($("li", this), target);
        opts.showContainer($(this).data("containers"), container, startup);
      },
      containerClass: "tabs-container"
    });
  };
  
  $.fn.tabify.ext.animate = function(value, opts) {
    opts.showContainer = function(all, self, startup) {
      all.hide();
      startup ? self.show() : self[value]();
    };
  };
  
  $.fn.tabify.ext.ajax = function(value, opts) {
    this.bind("selected.tabs", 
      function(e, target, container, startup) {
        var href = $("a", target).attr("href");
        if(!href.match(/^#/)) {
          $($("a", target).attr("rel"))
            .html("<div class='tabs-loading'>Loading</div>")
            .load(href);
        }
      }
    );
  };
    
})(jQuery);