tabify.jquery.js

(function($) {
  
  $.plugin("tabify", {
    options: {
      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"
    },
    initialize: function() {
      var opts = this.options; /* not sure exactly how this would work */

      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);
      });
    },
    start: function() {
      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]);
      });
    }
  });
  
  $.plugin.addOption("tabify", "animate", function(value, instance) {
    instance.opts.showContainer = function(all, self, startup) {
      all.hide();
      startup ? self.show() : self[value]();
    };
  });
  
  $.plugin.addOption("tabify", "ajax", function(value, instance) {
    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);