retro/perfect-plugin.html

## perfect-plugin.html
<html>
<head>
  <title>Tabs Demo!</title>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
  <style type="text/css">
    .container {
      margin-top: 20px;
    }
  </style>
</head>
<body>

  <div class="container">

    <ul id='tabs' class="nav nav-tabs">
      <li><a href='#starcraft'>Starcraft</a></li>
      <li><a href='#rua'>Robot Unicorn Attack</a></li>
      <li><a href='#fallout'>Fallout</a></li>
    </ul>
    <div id='starcraft'><h1>Starcraft Tab</h1></div>
    <div id='rua'><h1>RUA Tab</h1></div>
    <div id='fallout'><h1>Fallout Tab</h1></div>

  </div>

  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

  <script type='text/javascript'>
    $.pluginMaker = function(plugin) {

      // add the plugin function as a jQuery plugin
      $.fn[plugin.prototype.name] = function(options) {

        // get the arguments
        var args = $.makeArray(arguments),
        after = args.slice(1);

        return this.each(function() {

          // see if we have an instance
          var instance = $.data(this, plugin.prototype.name);
          if (instance) {

            // call a method on the instance
            if (typeof options == "string") {
              instance[options].apply(instance, after);
            } else if (instance.update) {

              // call update on the instance
              instance.update.apply(instance, args);
            }
          } else {

            // create the plugin
            new plugin(this, options);
          }
        })
      };
    };

    Bitovi = {};

    Bitovi.Tabs = function(el, options) {
      if (el) {
        this.init(el, options)
      }
    }
    $.extend(Bitovi.Tabs.prototype, {

      // the name of the plugin
      name: "bitovi_tabs",

      // Sets up the tabs widget
      init: function(el, options) {
        this.element = $(el).addClass(this.name);

        this.element.bind("destroyed",
          $.proxy(this.teardown, this));

        this.bind();

        // activate the first tab
        this.activate(this.element.children("li:first"));

        // hide other tabs
        var tab = this.tab;
        this.element.children("li:gt(0)").each(function() {
          tab($(this)).hide();
        });
      },
      // bind events to this instance's methods
      bind: function() {
        this._tabClick = $.proxy(this.tabClick, this);
        this.element.delegate("li", "click", this._tabClick);
      },

      // call destroy to teardown while leaving the element
      destroy: function() {
        this.element.unbind("destroyed", this.teardown);
        this.teardown();
      },
      // remove all the functionality of this tabs widget
      teardown: function() {
        $.removeData(this.element[0], this.name);
        this.element.removeClass(this.name + " tabs");
        this.unbind();
        this.element = null;

        var tab = this.tab;

        // show all other tabs
        this.element.children("li")
        .each(function() {
          tab($(this)).show()
        });

      },
      unbind: function() {
        this.element.undelegate("li","click",this._tabClick)
      },
      // helper function finds the tab for a given li
      tab: function(li) {
        return $(li.find("a").attr("href"))
      },
      // on an li click, activates new tab
      tabClick: function(ev) {
        ev.preventDefault();
        this.activate($(ev.currentTarget))
      },

      //hides old activate tab, shows new one
      activate: function(el) {
        this.tab(this.element.find('.active')
          .removeClass('active')).hide()
        this.tab(el.addClass('active')).show();
      }
    });

    $.pluginMaker(Bitovi.Tabs);
    //$("#tabs").bitovi_tabs();


    Bitovi.HistoryTabs = function(el, options) {
      if (el) {
        this.init(el, options)
      }
    };

    Bitovi.HistoryTabs.prototype = new Bitovi.Tabs();

    $.extend(Bitovi.HistoryTabs.prototype, {
      name: "bitovi_history_tabs",

      init : function(){
        Bitovi.Tabs.prototype.init.apply(this, arguments);
        this.hashchange();
      },

      // listen for hashchange
      bind: function() {
        this._hashchange = $.proxy(this.hashchange, this);
        $(window).bind("hashchange", this._hashchange);
      },

      // clean up listening for hashchange.
      // this is really important
      unbind: function() {
        $(window).unbind("hashchange", this._hashchange);
      },

      // activates the tab represented by the hash
      hashchange: function() {
        var hash = window.location.hash;
        this.activate(hash === '' || hash === '#' ?
          this.element.find("li:first") :
          this.element.find("a[href=" + hash + "]")
          .parent())
      }
    });

    $.pluginMaker(Bitovi.HistoryTabs);
    $("#tabs").bitovi_history_tabs();

  </script>
</body>
</html>
	<html>
	<head>
	<title>Tabs Demo!</title>
	<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
	.container {
	margin-top: 20px;
	}
	</style>
	</head>
	<body>

	<div class="container">

	<ul id='tabs' class="nav nav-tabs">
	<li><a href='#starcraft'>Starcraft</a></li>
	<li><a href='#rua'>Robot Unicorn Attack</a></li>
	<li><a href='#fallout'>Fallout</a></li>
	</ul>
	<div id='starcraft'><h1>Starcraft Tab</h1></div>
	<div id='rua'><h1>RUA Tab</h1></div>
	<div id='fallout'><h1>Fallout Tab</h1></div>

	</div>

	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

	<script type='text/javascript'>
	$.pluginMaker = function(plugin) {

	// add the plugin function as a jQuery plugin
	$.fn[plugin.prototype.name] = function(options) {

	// get the arguments
	var args = $.makeArray(arguments),
	after = args.slice(1);

	return this.each(function() {

	// see if we have an instance
	var instance = $.data(this, plugin.prototype.name);
	if (instance) {

	// call a method on the instance
	if (typeof options == "string") {
	instance[options].apply(instance, after);
	} else if (instance.update) {

	// call update on the instance
	instance.update.apply(instance, args);
	}
	} else {

	// create the plugin
	new plugin(this, options);
	}
	})
	};
	};

	Bitovi = {};

	Bitovi.Tabs = function(el, options) {
	if (el) {
	this.init(el, options)
	}
	}
	$.extend(Bitovi.Tabs.prototype, {

	// the name of the plugin
	name: "bitovi_tabs",

	// Sets up the tabs widget
	init: function(el, options) {
	this.element = $(el).addClass(this.name);

	this.element.bind("destroyed",
	$.proxy(this.teardown, this));

	this.bind();

	// activate the first tab
	this.activate(this.element.children("li:first"));

	// hide other tabs
	var tab = this.tab;
	this.element.children("li:gt(0)").each(function() {
	tab($(this)).hide();
	});
	},
	// bind events to this instance's methods
	bind: function() {
	this._tabClick = $.proxy(this.tabClick, this);
	this.element.delegate("li", "click", this._tabClick);
	},

	// call destroy to teardown while leaving the element
	destroy: function() {
	this.element.unbind("destroyed", this.teardown);
	this.teardown();
	},
	// remove all the functionality of this tabs widget
	teardown: function() {
	$.removeData(this.element[0], this.name);
	this.element.removeClass(this.name + " tabs");
	this.unbind();
	this.element = null;

	var tab = this.tab;

	// show all other tabs
	this.element.children("li")
	.each(function() {
	tab($(this)).show()
	});

	},
	unbind: function() {
	this.element.undelegate("li","click",this._tabClick)
	},
	// helper function finds the tab for a given li
	tab: function(li) {
	return $(li.find("a").attr("href"))
	},
	// on an li click, activates new tab
	tabClick: function(ev) {
	ev.preventDefault();
	this.activate($(ev.currentTarget))
	},

	//hides old activate tab, shows new one
	activate: function(el) {
	this.tab(this.element.find('.active')
	.removeClass('active')).hide()
	this.tab(el.addClass('active')).show();
	}
	});

	$.pluginMaker(Bitovi.Tabs);
	//$("#tabs").bitovi_tabs();



	Bitovi.HistoryTabs = function(el, options) {
	if (el) {
	this.init(el, options)
	}
	};

	Bitovi.HistoryTabs.prototype = new Bitovi.Tabs();

	$.extend(Bitovi.HistoryTabs.prototype, {
	name: "bitovi_history_tabs",

	init : function(){
	Bitovi.Tabs.prototype.init.apply(this, arguments);
	this.hashchange();
	},

	// listen for hashchange
	bind: function() {
	this._hashchange = $.proxy(this.hashchange, this);
	$(window).bind("hashchange", this._hashchange);
	},

	// clean up listening for hashchange.
	// this is really important
	unbind: function() {
	$(window).unbind("hashchange", this._hashchange);
	},

	// activates the tab represented by the hash
	hashchange: function() {
	var hash = window.location.hash;
	this.activate(hash === '' \|\| hash === '#' ?
	this.element.find("li:first") :
	this.element.find("a[href=" + hash + "]")
	.parent())
	}
	});

	$.pluginMaker(Bitovi.HistoryTabs);
	$("#tabs").bitovi_history_tabs();

	</script>
	</body>
	</html>