##// END OF EJS Templates
Added TabView to multicontainer
Jonathan Frederic -
Show More
@@ -58,4 +58,69 b' require(["notebook/js/widget"], function(){'
58 58 });
59 59
60 60 IPython.notebook.widget_manager.register_widget_view('AccordionView', AccordionView);
61
62 var TabView = IPython.WidgetView.extend({
63
64 render: function(){
65 this.$el = $('<div />');
66 var uuid = IPython.utils.uuid();
67 this.$tabs = $('<div />', {id: uuid})
68 .addClass('nav')
69 .addClass('nav-tabs')
70 .appendTo(this.$el);
71 this.$tab_contents = $('<div />', {id: uuid + 'Content'})
72 .addClass('tab-content')
73 .appendTo(this.$el);
74
75 this.containers = [];
76 },
77
78 update: function() {
79 // Set tab titles
80 var titles = this.model.get('_titles');
81 for (var page_index in titles) {
82 var tab_text = this.containers[page_index]
83 if (tab_text != undefined) {
84 tab_text.html(titles[page_index]);
85 }
86 }
87
88 return IPython.WidgetView.prototype.update.call(this);
89 },
90
91 display_child: function(view) {
92
93 var index = this.containers.length;
94 var uuid = IPython.utils.uuid();
95
96 var that = this;
97 var tab = $('<li />')
98 .css('list-style-type', 'none')
99 .appendTo(this.$tabs);
100 var tab_text = $('<a />')
101 .attr('href', '#' + uuid)
102 .attr('data-toggle', 'tab')
103 .html('Page ' + index)
104 .appendTo(tab)
105 .click(function (e) {
106 that.$tabs.find('li')
107 .removeClass('active');
108 });
109 this.containers.push(tab_text);
110
111 var contents_div = $('<div />', {id: uuid})
112 .addClass('tab-pane')
113 .addClass('fade')
114 .append(view.$el)
115 .appendTo(this.$tab_contents);
116
117 if (index==0) {
118 tab_text.tab('show');
119 }
120 this.update();
121 },
122 });
123
124 IPython.notebook.widget_manager.register_widget_view('TabView', TabView);
125
61 126 });
@@ -22,7 +22,7 b' from IPython.utils.traitlets import Unicode, Dict'
22 22 #-----------------------------------------------------------------------------
23 23 class MulticontainerWidget(Widget):
24 24 target_name = Unicode('MulticontainerWidgetModel')
25 default_view_name = Unicode('AccordionView')
25 default_view_name = Unicode('TabView')
26 26
27 27 # Keys
28 28 _keys = ['_titles']
General Comments 0
You need to be logged in to leave comments. Login now