Added TabView to multicontainer

IPython/html/static/notebook/js/widgets/multicontainer.js

@@ -1,61 +1,126 b''
 require(["notebook/js/widget"], function(){
     var MulticontainerModel = IPython.WidgetModel.extend({});
     IPython.notebook.widget_manager.register_widget_model('MulticontainerWidgetModel', MulticontainerModel);
 
     var AccordionView = IPython.WidgetView.extend({
         
         render: function(){
             this.$el = $('<div />', {id: IPython.utils.uuid()})
                 .addClass('accordion');
             this.containers = [];
         },
         
         update: function() {
             // Set tab titles
             var titles = this.model.get('_titles');
             for (var page_index in titles) {
 
                 var accordian = this.containers[page_index]
                 if (accordian != undefined) {
                     accordian
                         .find('.accordion-heading')
                         .find('.accordion-toggle')
                         .html(titles[page_index]);
                 }
             }
 
             return IPython.WidgetView.prototype.update.call(this);
         },
 
         display_child: function(view) {
 
             var index = this.containers.length;
             var uuid = IPython.utils.uuid();
             var accordion_group = $('<div />')
                 .addClass('accordion-group')
                 .appendTo(this.$el);
             var accordion_heading = $('<div />')
                 .addClass('accordion-heading')
                 .appendTo(accordion_group);
             var accordion_toggle = $('<a />')
                 .addClass('accordion-toggle')
                 .attr('data-toggle', 'collapse')
                 .attr('data-parent', '#' + this.$el.attr('id'))
                 .attr('href', '#' + uuid)
                 .html('Page ' + index)
                 .appendTo(accordion_heading);
             var accordion_body = $('<div />', {id: uuid})
                 .addClass('accordion-body collapse')
                 .appendTo(accordion_group);
             var accordion_inner = $('<div />')
                 .addClass('accordion-inner')
                 .appendTo(accordion_body);
             this.containers.push(accordion_group);
 
             accordion_inner.append(view.$el);
             this.update();
         },
     });
 
     IPython.notebook.widget_manager.register_widget_view('AccordionView', AccordionView);
-});
  No newline at end of file
+    
+    var TabView = IPython.WidgetView.extend({
+        
+        render: function(){
+            this.$el = $('<div />');
+            var uuid = IPython.utils.uuid();
+            this.$tabs = $('<div />', {id: uuid})
+                .addClass('nav')
+                .addClass('nav-tabs')
+                .appendTo(this.$el);
+            this.$tab_contents = $('<div />', {id: uuid + 'Content'})
+                .addClass('tab-content')
+                .appendTo(this.$el);
+
+            this.containers = [];
+        },
+        
+        update: function() {
+            // Set tab titles
+            var titles = this.model.get('_titles');
+            for (var page_index in titles) {
+                var tab_text = this.containers[page_index]
+                if (tab_text != undefined) {
+                    tab_text.html(titles[page_index]);
+                }
+            }
+
+            return IPython.WidgetView.prototype.update.call(this);
+        },
+
+        display_child: function(view) {
+
+            var index = this.containers.length;
+            var uuid = IPython.utils.uuid();
+
+            var that = this;
+            var tab = $('<li />')
+                .css('list-style-type', 'none')
+                .appendTo(this.$tabs);
+            var tab_text = $('<a />')
+                .attr('href', '#' + uuid)
+                .attr('data-toggle', 'tab') 
+                .html('Page ' + index)
+                .appendTo(tab)
+                .click(function (e) {
+                    that.$tabs.find('li')
+                        .removeClass('active');
+                });
+            this.containers.push(tab_text);
+
+            var contents_div = $('<div />', {id: uuid})
+                .addClass('tab-pane')
+                .addClass('fade')
+                .append(view.$el)
+                .appendTo(this.$tab_contents);
+
+            if (index==0) {
+                tab_text.tab('show');
+            }
+            this.update();
+        },
+    });
+
+    IPython.notebook.widget_manager.register_widget_view('TabView', TabView);
+
+});

IPython/html/widgets/widget_multicontainer.py

@@ -1,55 +1,55 b''
 """MulticontainerWidget class.  
 
 Represents a multipage container that can be used to group other widgets into
 pages.
 """
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 from widget import Widget
 from IPython.utils.traitlets import Unicode, Dict
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
 class MulticontainerWidget(Widget):
     target_name = Unicode('MulticontainerWidgetModel')
-    default_view_name = Unicode('AccordionView')
+    default_view_name = Unicode('TabView')
 
     # Keys
     _keys = ['_titles']
     _titles = Dict(help="Titles of the pages")
 
     # Public methods
     def set_title(self, index, title):
         """Sets the title of a container pages
 
         Parameters
         ----------
         index : int
             Index of the container page
         title : unicode
             New title"""
         self._titles[index] = title
         self.send_state('_titles')
 
 
     def get_title(self, index):
         """Gets the title of a container pages
 
         Parameters
         ----------
         index : int
             Index of the container page"""
         if index in self._titles:
             return self._titles[index]
         else:
             return None