lightweight tab plugin

lightweight tab plugin

by Seungrae Lee

HTML

tab example-1
<div class="example-1 ui-stab">
  <div class="ui-stab-head"> <a href="#1" class="ui-stab-selected">Tab 1</a>

  </div>
  <div class="ui-stab-head"><a href="#2">Tab 2</a>

  </div>
  <div class="ui-stab-head"><a href="#3">Tab 3</a>

  </div>
  <div name="#1" class="ui-stab-content ui-stab-selected">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
  <div name="#2" class="ui-stab-content">content2</div>
  <div name="#3" class="ui-stab-content">content3</div>
</div>

CSS

body {
  font: 'ＭＳ Ｐゴシック';
  color: #333;
  margin: 10px 5px;
  background: #eee;
}

.ui-stab {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  font-family: "ＭＳ Ｐゴシック", "Osaka";
  font-size: 10pt;
}

.ui-stab .ui-stab-head {
  margin: 0;
  padding: 0;
  overflow: hidden;
  float: left;
}

.ui-stab .ui-stab-head a {
  display: block;
  text-decoration: none;
  outline: 0;
  padding: 6px 12px;
  margin-right: 2px;
  color: #FFFFFF;
  background: #446EA4;
}

.ui-stab-head a:hover {
  background: #FFD65A;
  color: #494949;
}

.ui-stab-head a:focus {
  text-decoration: underline;
}

.ui-stab a.ui-stab-selected {
  background: #FFFFFF;
  text-decoration: none;
  border-left: 1px solid #CCCCCC;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
  color: #000000;
}

.ui-stab .ui-stab-content {
  float: left;
  width: 100%;
  padding: 10px;
  background: #FFFFFF;
  border-left: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  height: auto;
  position: absolute;
  left: -9999px;
  overflow: auto;
}

div.ui-stab-selected {
  position: static !important;
}

JavaScript

/* usage:
 *  $(selector).stab({
 *      selected: 1,
 *      minHeight: 450
 *  });
 * options:
 *    @selected: selected index of the tabs(default: 1)
 *    @minHeight: the height of selected tab
 *    @resizable: resize mode of div content(default: false)
 *    @adjust: this option is applicable to the case in resizable true
 *    @container is the object contains tabs
 *    @offset is the size to be subtracted from container's height
 */
(function(factory) {
	if (typeof define === "function" && define.amd) {
		// AMD. Register as an anonymous module.
		define(["jquery"], factory);
	} else {
		// Browser globals
		factory(jQuery);
	}
}(function($) {

  var uiTabHead = ".ui-stab-head";
  var uiTabContent = ".ui-stab-content";
  var uiTabSelected = "ui-stab-selected";

  $.extend($.fn, {
    stab: function(options) {
      return this.each(function() {
        $.creator(this, options);
      });
    }
  });

  // instance creator
  $.creator = function(target, options) {
    if (target.instance) {
      target.instance.init();
    } else {
      target.instance = new $.stab(options, target);
    } //if~else
    return target.instance;
  };

  // constructor
  $.stab = function(options, target) {
    // merge options
    this.o = $.extend(true, {}, $.stab.defaults, options);
    this.target = target;
    this.init();
  };

  // implementation
  $.extend($.stab, {
    version: "1.1.2",
    defaults: {
      selected: 1,
      minHeight: 100,
      resizable: false,
      adjust: {
        container: $(window),
        offset: 0
      }
    },
    setDefaults: function(settings) {
      $.extend($.stab.defaults, settings);
    },
    prototype: {
      init: function() {
        this._prepare();
      },
      _prepare: function() {
        var self = this,
          $target = $(self.target),
          options = self.o,
          container = options.adjust.container;

        this._addEvent(options.selected);
        // add event listener
       ...