Skip to content

Instantly share code, notes, and snippets.

@retro
Created December 4, 2013 17:26
Show Gist options
  • Save retro/7791769 to your computer and use it in GitHub Desktop.
Save retro/7791769 to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment