diff --git a/hacking/tabs.html b/hacking/tabs.html
index 4b96e16203..90a687101d 100644
--- a/hacking/tabs.html
+++ b/hacking/tabs.html
@@ -72,9 +72,49 @@
var tab3 = document.getElementById('tab3');
var tab4 = document.getElementById('tab4');
+ var controller = function(opts) {
+ this.el = opts.el;
+ }
+ controller.prototype = {
+ detach: function() {
+ //this.el.style.display = 'none';
+ var parentNode = this.el.parentNode;
+ if(!parentNode) {
+ return;
+ }
+ var next = this.el.nextSibling;
+ this._lastNodeSpot = next;
+ this._lastNodeParent = parentNode;
+ parentNode.removeChild(this.el);
+ },
+ attach: function() {
+ //this.el.style.display = 'block';
+ if(this._lastNodeSpot) {
+ this._lastNodeParent.insertBefore(this.el, this._lastNodeSpot);
+ }
+ }
+ };
+
+ var c1 = new controller({
+ el: tab1
+ });
+ c1.title = 'Mice';
+ var c2 = new controller({
+ el: tab2
+ });
+ c2.title = 'Dogs';
+ var c3 = new controller({
+ el: tab3
+ });
+ c3.title = 'Cats';
+ var c4 = new controller({
+ el: tab4
+ });
+ c4.title = 'Cats';
+
var c = new TabBarController({
tabBar: new TabBar({ el: tab }),
- controllers: [ { el: tab1 }, { el: tab2 }, { el: tab3 }, { el: tab4 }]
+ controllers: [ c1, c2, c3, c4 ]
});