Tab bar test with detach/attach DOM elements

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 ]
       });
     </script>
   </body>