Added TabView to multicontainer

This commit is contained in:
Jonathan Frederic 2013-10-28 18:34:51 +00:00
parent 6dd1bce589
commit dfd4e3269e
2 changed files with 67 additions and 2 deletions

View File

@ -58,4 +58,69 @@ require(["notebook/js/widget"], function(){
});
IPython.notebook.widget_manager.register_widget_view('AccordionView', AccordionView);
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);
});

View File

@ -22,7 +22,7 @@ from IPython.utils.traitlets import Unicode, Dict
#-----------------------------------------------------------------------------
class MulticontainerWidget(Widget):
target_name = Unicode('MulticontainerWidgetModel')
default_view_name = Unicode('AccordionView')
default_view_name = Unicode('TabView')
# Keys
_keys = ['_titles']