Show More
@@ -1534,18 +1534,6 b' h6:hover .anchor-link {' | |||||
1534 | text-align: center; |
|
1534 | text-align: center; | |
1535 | vertical-align: text-top; |
|
1535 | vertical-align: text-top; | |
1536 | } |
|
1536 | } | |
1537 | .widget-modal { |
|
|||
1538 | /* Box - ModalView */ |
|
|||
1539 | overflow: hidden; |
|
|||
1540 | position: absolute !important; |
|
|||
1541 | top: 0px; |
|
|||
1542 | left: 0px; |
|
|||
1543 | margin-left: 0px !important; |
|
|||
1544 | } |
|
|||
1545 | .widget-modal-body { |
|
|||
1546 | /* Box - ModalView Body */ |
|
|||
1547 | max-height: none !important; |
|
|||
1548 | } |
|
|||
1549 | .widget-box { |
|
1537 | .widget-box { | |
1550 | /* Box */ |
|
1538 | /* Box */ | |
1551 | box-sizing: border-box; |
|
1539 | box-sizing: border-box; | |
@@ -1582,12 +1570,4 b' h6:hover .anchor-link {' | |||||
1582 | .widget-radio-box label { |
|
1570 | .widget-radio-box label { | |
1583 | margin-top: 0px; |
|
1571 | margin-top: 0px; | |
1584 | } |
|
1572 | } | |
1585 | .docked-widget-modal { |
|
|||
1586 | /* Horizontal Label */ |
|
|||
1587 | overflow: hidden; |
|
|||
1588 | position: relative !important; |
|
|||
1589 | top: 0px !important; |
|
|||
1590 | left: 0px !important; |
|
|||
1591 | margin-left: 0px !important; |
|
|||
1592 | } |
|
|||
1593 | /*# sourceMappingURL=ipython.min.css.map */ No newline at end of file |
|
1573 | /*# sourceMappingURL=ipython.min.css.map */ |
@@ -9460,18 +9460,6 b' h6:hover .anchor-link {' | |||||
9460 | text-align: center; |
|
9460 | text-align: center; | |
9461 | vertical-align: text-top; |
|
9461 | vertical-align: text-top; | |
9462 | } |
|
9462 | } | |
9463 | .widget-modal { |
|
|||
9464 | /* Box - ModalView */ |
|
|||
9465 | overflow: hidden; |
|
|||
9466 | position: absolute !important; |
|
|||
9467 | top: 0px; |
|
|||
9468 | left: 0px; |
|
|||
9469 | margin-left: 0px !important; |
|
|||
9470 | } |
|
|||
9471 | .widget-modal-body { |
|
|||
9472 | /* Box - ModalView Body */ |
|
|||
9473 | max-height: none !important; |
|
|||
9474 | } |
|
|||
9475 | .widget-box { |
|
9463 | .widget-box { | |
9476 | /* Box */ |
|
9464 | /* Box */ | |
9477 | box-sizing: border-box; |
|
9465 | box-sizing: border-box; | |
@@ -9508,14 +9496,6 b' h6:hover .anchor-link {' | |||||
9508 | .widget-radio-box label { |
|
9496 | .widget-radio-box label { | |
9509 | margin-top: 0px; |
|
9497 | margin-top: 0px; | |
9510 | } |
|
9498 | } | |
9511 | .docked-widget-modal { |
|
|||
9512 | /* Horizontal Label */ |
|
|||
9513 | overflow: hidden; |
|
|||
9514 | position: relative !important; |
|
|||
9515 | top: 0px !important; |
|
|||
9516 | left: 0px !important; |
|
|||
9517 | margin-left: 0px !important; |
|
|||
9518 | } |
|
|||
9519 | /*! |
|
9499 | /*! | |
9520 | * |
|
9500 | * | |
9521 | * IPython notebook webapp |
|
9501 | * IPython notebook webapp |
@@ -542,11 +542,11 b' define(["widgets/js/manager",' | |||||
542 | this.update_attr('border-style', this.model.get('border_style')); |
|
542 | this.update_attr('border-style', this.model.get('border_style')); | |
543 | this.update_attr('font-style', this.model.get('font_style')); |
|
543 | this.update_attr('font-style', this.model.get('font_style')); | |
544 | this.update_attr('font-weight', this.model.get('font_weight')); |
|
544 | this.update_attr('font-weight', this.model.get('font_weight')); | |
545 | this.update_attr('font-size', this.model.get('font_size')); |
|
545 | this.update_attr('font-size', this._default_px(this.model.get('font_size'))); | |
546 | this.update_attr('font-family', this.model.get('font_family')); |
|
546 | this.update_attr('font-family', this.model.get('font_family')); | |
547 | this.update_attr('padding', this.model.get('padding')); |
|
547 | this.update_attr('padding', this.model.get('padding')); | |
548 | this.update_attr('margin', this.model.get('margin')); |
|
548 | this.update_attr('margin', this._default_px(this.model.get('margin'))); | |
549 | this.update_attr('border-radius', this.model.get('border_radius')); |
|
549 | this.update_attr('border-radius', this._default_px(this.model.get('border_radius'))); | |
550 |
|
550 | |||
551 | this.update_css(this.model, this.model.get("_css")); |
|
551 | this.update_css(this.model, this.model.get("_css")); | |
552 | }, this); |
|
552 | }, this); |
@@ -146,224 +146,8 b' define([' | |||||
146 | }, |
|
146 | }, | |
147 | }); |
|
147 | }); | |
148 |
|
148 | |||
149 | var PopupView = BoxView.extend({ |
|
|||
150 |
|
||||
151 | render: function(){ |
|
|||
152 | /** |
|
|||
153 | * Called when view is rendered. |
|
|||
154 | */ |
|
|||
155 | var that = this; |
|
|||
156 |
|
||||
157 | this.$el.on("remove", function(){ |
|
|||
158 | that.$backdrop.remove(); |
|
|||
159 | }); |
|
|||
160 | this.$backdrop = $('<div />') |
|
|||
161 | .appendTo($('#notebook-container')) |
|
|||
162 | .addClass('modal-dialog') |
|
|||
163 | .css('position', 'absolute') |
|
|||
164 | .css('left', '0px') |
|
|||
165 | .css('top', '0px'); |
|
|||
166 | this.$window = $('<div />') |
|
|||
167 | .appendTo(this.$backdrop) |
|
|||
168 | .addClass('modal-content widget-modal') |
|
|||
169 | .mousedown(function(){ |
|
|||
170 | that.bring_to_front(); |
|
|||
171 | }); |
|
|||
172 |
|
||||
173 | // Set the elements array since the this.$window element is not child |
|
|||
174 | // of this.$el and the parent widget manager or other widgets may |
|
|||
175 | // need to know about all of the top-level widgets. The IPython |
|
|||
176 | // widget manager uses this to register the elements with the |
|
|||
177 | // keyboard manager. |
|
|||
178 | this.additional_elements = [this.$window]; |
|
|||
179 |
|
||||
180 | this.$title_bar = $('<div />') |
|
|||
181 | .addClass('popover-title') |
|
|||
182 | .appendTo(this.$window) |
|
|||
183 | .mousedown(function(){ |
|
|||
184 | that.bring_to_front(); |
|
|||
185 | }); |
|
|||
186 | this.$close = $('<button />') |
|
|||
187 | .addClass('close fa fa-remove') |
|
|||
188 | .css('margin-left', '5px') |
|
|||
189 | .appendTo(this.$title_bar) |
|
|||
190 | .click(function(){ |
|
|||
191 | that.hide(); |
|
|||
192 | event.stopPropagation(); |
|
|||
193 | }); |
|
|||
194 | this.$minimize = $('<button />') |
|
|||
195 | .addClass('close fa fa-arrow-down') |
|
|||
196 | .appendTo(this.$title_bar) |
|
|||
197 | .click(function(){ |
|
|||
198 | that.popped_out = !that.popped_out; |
|
|||
199 | if (!that.popped_out) { |
|
|||
200 | that.$minimize |
|
|||
201 | .removeClass('fa-arrow-down') |
|
|||
202 | .addClass('fa-arrow-up'); |
|
|||
203 |
|
||||
204 | that.$window |
|
|||
205 | .draggable('destroy') |
|
|||
206 | .resizable('destroy') |
|
|||
207 | .removeClass('widget-modal modal-content') |
|
|||
208 | .addClass('docked-widget-modal') |
|
|||
209 | .detach() |
|
|||
210 | .insertBefore(that.$show_button); |
|
|||
211 | that.$show_button.hide(); |
|
|||
212 | that.$close.hide(); |
|
|||
213 | } else { |
|
|||
214 | that.$minimize |
|
|||
215 | .addClass('fa-arrow-down') |
|
|||
216 | .removeClass('fa-arrow-up'); |
|
|||
217 |
|
||||
218 | that.$window |
|
|||
219 | .removeClass('docked-widget-modal') |
|
|||
220 | .addClass('widget-modal modal-content') |
|
|||
221 | .detach() |
|
|||
222 | .appendTo(that.$backdrop) |
|
|||
223 | .draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'}) |
|
|||
224 | .resizable() |
|
|||
225 | .children('.ui-resizable-handle').show(); |
|
|||
226 | that.show(); |
|
|||
227 | that.$show_button.show(); |
|
|||
228 | that.$close.show(); |
|
|||
229 | } |
|
|||
230 | event.stopPropagation(); |
|
|||
231 | }); |
|
|||
232 | this.$title = $('<div />') |
|
|||
233 | .addClass('widget-modal-title') |
|
|||
234 | .html(" ") |
|
|||
235 | .appendTo(this.$title_bar); |
|
|||
236 | this.$box = $('<div />') |
|
|||
237 | .addClass('modal-body') |
|
|||
238 | .addClass('widget-modal-body') |
|
|||
239 | .addClass('widget-box') |
|
|||
240 | .addClass('vbox') |
|
|||
241 | .appendTo(this.$window); |
|
|||
242 |
|
||||
243 | this.$show_button = $('<button />') |
|
|||
244 | .html(" ") |
|
|||
245 | .addClass('btn btn-info widget-modal-show') |
|
|||
246 | .appendTo(this.$el) |
|
|||
247 | .click(function(){ |
|
|||
248 | that.show(); |
|
|||
249 | }); |
|
|||
250 |
|
||||
251 | this.$window.draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'}); |
|
|||
252 | this.$window.resizable(); |
|
|||
253 | this.$window.on('resize', function(){ |
|
|||
254 | that.$box.outerHeight(that.$window.innerHeight() - that.$title_bar.outerHeight()); |
|
|||
255 | }); |
|
|||
256 |
|
||||
257 | this._shown_once = false; |
|
|||
258 | this.popped_out = true; |
|
|||
259 |
|
||||
260 | this.children_views.update(this.model.get('children')) |
|
|||
261 | }, |
|
|||
262 |
|
||||
263 | hide: function() { |
|
|||
264 | /** |
|
|||
265 | * Called when the modal hide button is clicked. |
|
|||
266 | */ |
|
|||
267 | this.$window.hide(); |
|
|||
268 | this.$show_button.removeClass('btn-info'); |
|
|||
269 | }, |
|
|||
270 |
|
||||
271 | show: function() { |
|
|||
272 | /** |
|
|||
273 | * Called when the modal show button is clicked. |
|
|||
274 | */ |
|
|||
275 | this.$show_button.addClass('btn-info'); |
|
|||
276 | this.$window.show(); |
|
|||
277 | if (this.popped_out) { |
|
|||
278 | this.$window.css("positon", "absolute"); |
|
|||
279 | this.$window.css("top", "0px"); |
|
|||
280 | this.$window.css("left", Math.max(0, (($('body').outerWidth() - this.$window.outerWidth()) / 2) + |
|
|||
281 | $(window).scrollLeft()) + "px"); |
|
|||
282 | this.bring_to_front(); |
|
|||
283 | } |
|
|||
284 | }, |
|
|||
285 |
|
||||
286 | bring_to_front: function() { |
|
|||
287 | /** |
|
|||
288 | * Make the modal top-most, z-ordered about the other modals. |
|
|||
289 | */ |
|
|||
290 | var $widget_modals = $(".widget-modal"); |
|
|||
291 | var max_zindex = 0; |
|
|||
292 | $widget_modals.each(function (index, el){ |
|
|||
293 | var zindex = parseInt($(el).css('z-index')); |
|
|||
294 | if (!isNaN(zindex)) { |
|
|||
295 | max_zindex = Math.max(max_zindex, zindex); |
|
|||
296 | } |
|
|||
297 | }); |
|
|||
298 |
|
||||
299 | // Start z-index of widget modals at 2000 |
|
|||
300 | max_zindex = Math.max(max_zindex, 2000); |
|
|||
301 |
|
||||
302 | $widget_modals.each(function (index, el){ |
|
|||
303 | $el = $(el); |
|
|||
304 | if (max_zindex == parseInt($el.css('z-index'))) { |
|
|||
305 | $el.css('z-index', max_zindex - 1); |
|
|||
306 | } |
|
|||
307 | }); |
|
|||
308 | this.$window.css('z-index', max_zindex); |
|
|||
309 | }, |
|
|||
310 |
|
||||
311 | update: function(){ |
|
|||
312 | /** |
|
|||
313 | * Update the contents of this view |
|
|||
314 | * |
|
|||
315 | * Called when the model is changed. The model may have been |
|
|||
316 | * changed by another view or by a state update from the back-end. |
|
|||
317 | */ |
|
|||
318 | var description = this.model.get('description'); |
|
|||
319 | if (description.trim().length === 0) { |
|
|||
320 | this.$title.html(" "); // Preserve title height |
|
|||
321 | } else { |
|
|||
322 | this.typeset(this.$title, description); |
|
|||
323 | } |
|
|||
324 |
|
||||
325 | var button_text = this.model.get('button_text'); |
|
|||
326 | if (button_text.trim().length === 0) { |
|
|||
327 | this.$show_button.html(" "); // Preserve button height |
|
|||
328 | } else { |
|
|||
329 | this.$show_button.text(button_text); |
|
|||
330 | } |
|
|||
331 |
|
||||
332 | if (!this._shown_once) { |
|
|||
333 | this._shown_once = true; |
|
|||
334 | this.show(); |
|
|||
335 | } |
|
|||
336 |
|
||||
337 | return PopupView.__super__.update.apply(this); |
|
|||
338 | }, |
|
|||
339 |
|
||||
340 | _get_selector_element: function(selector) { |
|
|||
341 | /** |
|
|||
342 | * Get an element view a 'special' jquery selector. (see widget.js) |
|
|||
343 | * |
|
|||
344 | * Since the modal actually isn't within the $el in the DOM, we need to extend |
|
|||
345 | * the selector logic to allow the user to set css on the modal if need be. |
|
|||
346 | * The convention used is: |
|
|||
347 | * "modal" - select the modal div |
|
|||
348 | * "modal [selector]" - select element(s) within the modal div. |
|
|||
349 | * "[selector]" - select elements within $el |
|
|||
350 | * "" - select the $el |
|
|||
351 | */ |
|
|||
352 | if (selector.substring(0, 5) == 'modal') { |
|
|||
353 | if (selector == 'modal') { |
|
|||
354 | return this.$window; |
|
|||
355 | } else { |
|
|||
356 | return this.$window.find(selector.substring(6)); |
|
|||
357 | } |
|
|||
358 | } else { |
|
|||
359 | return PopupView.__super__._get_selector_element.apply(this, [selector]); |
|
|||
360 | } |
|
|||
361 | }, |
|
|||
362 | }); |
|
|||
363 |
|
||||
364 | return { |
|
149 | return { | |
365 | 'BoxView': BoxView, |
|
150 | 'BoxView': BoxView, | |
366 | 'PopupView': PopupView, |
|
|||
367 | 'FlexBoxView': FlexBoxView, |
|
151 | 'FlexBoxView': FlexBoxView, | |
368 | }; |
|
152 | }; | |
369 | }); |
|
153 | }); |
@@ -249,20 +249,6 b'' | |||||
249 |
|
249 | |||
250 | } |
|
250 | } | |
251 |
|
251 | |||
252 | .widget-modal { |
|
|||
253 | /* Box - ModalView */ |
|
|||
254 | overflow : hidden; |
|
|||
255 | position : absolute !important; |
|
|||
256 | top : 0px; |
|
|||
257 | left : 0px; |
|
|||
258 | margin-left : 0px !important; |
|
|||
259 | } |
|
|||
260 |
|
||||
261 | .widget-modal-body { |
|
|||
262 | /* Box - ModalView Body */ |
|
|||
263 | max-height: none !important; |
|
|||
264 | } |
|
|||
265 |
|
||||
266 | .widget-box { |
|
252 | .widget-box { | |
267 | /* Box */ |
|
253 | /* Box */ | |
268 | .border-box-sizing(); |
|
254 | .border-box-sizing(); | |
@@ -280,12 +266,3 b'' | |||||
280 | margin-top: 0px; |
|
266 | margin-top: 0px; | |
281 | } |
|
267 | } | |
282 | } |
|
268 | } | |
283 |
|
||||
284 | .docked-widget-modal { |
|
|||
285 | /* Horizontal Label */ |
|
|||
286 | overflow: hidden; |
|
|||
287 | position: relative !important; |
|
|||
288 | top: 0px !important; |
|
|||
289 | left: 0px !important; |
|
|||
290 | margin-left: 0px !important; |
|
|||
291 | } |
|
@@ -2,7 +2,7 b' from .widget import Widget, DOMWidget, CallbackDispatcher, register' | |||||
2 |
|
2 | |||
3 | from .widget_bool import Checkbox, ToggleButton |
|
3 | from .widget_bool import Checkbox, ToggleButton | |
4 | from .widget_button import Button |
|
4 | from .widget_button import Button | |
5 |
from .widget_box import Box, |
|
5 | from .widget_box import Box, FlexBox, HBox, VBox | |
6 | from .widget_float import FloatText, BoundedFloatText, FloatSlider, FloatProgress, FloatRangeSlider |
|
6 | from .widget_float import FloatText, BoundedFloatText, FloatSlider, FloatProgress, FloatRangeSlider | |
7 | from .widget_image import Image |
|
7 | from .widget_image import Image | |
8 | from .widget_int import IntText, BoundedIntText, IntSlider, IntProgress, IntRangeSlider |
|
8 | from .widget_int import IntText, BoundedIntText, IntSlider, IntProgress, IntRangeSlider | |
@@ -16,7 +16,7 b' from .widget_link import Link, link, DirectionalLink, dlink' | |||||
16 | # Deprecated classes |
|
16 | # Deprecated classes | |
17 | from .widget_bool import CheckboxWidget, ToggleButtonWidget |
|
17 | from .widget_bool import CheckboxWidget, ToggleButtonWidget | |
18 | from .widget_button import ButtonWidget |
|
18 | from .widget_button import ButtonWidget | |
19 |
from .widget_box import ContainerWidget |
|
19 | from .widget_box import ContainerWidget | |
20 | from .widget_float import FloatTextWidget, BoundedFloatTextWidget, FloatSliderWidget, FloatProgressWidget |
|
20 | from .widget_float import FloatTextWidget, BoundedFloatTextWidget, FloatSliderWidget, FloatProgressWidget | |
21 | from .widget_image import ImageWidget |
|
21 | from .widget_image import ImageWidget | |
22 | from .widget_int import IntTextWidget, BoundedIntTextWidget, IntSliderWidget, IntProgressWidget |
|
22 | from .widget_int import IntTextWidget, BoundedIntTextWidget, IntSliderWidget, IntProgressWidget |
@@ -45,15 +45,6 b' class Box(DOMWidget):' | |||||
45 | child._handle_displayed() |
|
45 | child._handle_displayed() | |
46 |
|
46 | |||
47 |
|
47 | |||
48 | @register('IPython.Popup') |
|
|||
49 | class Popup(Box): |
|
|||
50 | """Displays multiple widgets in an in page popup div.""" |
|
|||
51 | _view_name = Unicode('PopupView', sync=True) |
|
|||
52 |
|
||||
53 | description = Unicode(sync=True) |
|
|||
54 | button_text = Unicode(sync=True) |
|
|||
55 |
|
||||
56 |
|
||||
57 | @register('IPython.FlexBox') |
|
48 | @register('IPython.FlexBox') | |
58 | class FlexBox(Box): |
|
49 | class FlexBox(Box): | |
59 | """Displays multiple widgets using the flexible box model.""" |
|
50 | """Displays multiple widgets using the flexible box model.""" | |
@@ -87,5 +78,3 b' def HBox(*pargs, **kwargs):' | |||||
87 |
|
78 | |||
88 | # Remove in IPython 4.0 |
|
79 | # Remove in IPython 4.0 | |
89 | ContainerWidget = DeprecatedClass(Box, 'ContainerWidget') |
|
80 | ContainerWidget = DeprecatedClass(Box, 'ContainerWidget') | |
90 | PopupWidget = DeprecatedClass(Popup, 'PopupWidget') |
|
|||
91 |
|
@@ -61,9 +61,12 b'' | |||||
61 | " self.namespace = NamespaceMagics()\n", |
|
61 | " self.namespace = NamespaceMagics()\n", | |
62 | " self.namespace.shell = ipython.kernel.shell\n", |
|
62 | " self.namespace.shell = ipython.kernel.shell\n", | |
63 | " \n", |
|
63 | " \n", | |
64 |
" self._ |
|
64 | " self._box = widgets.Box()\n", | |
65 |
" self._ |
|
65 | " self._box._dom_classes = ['inspector']\n", | |
66 | " self._popout.button_text = self._popout.description\n", |
|
66 | " self._box.background_color = '#fff'\n", | |
|
67 | " self._box.border_color = '#ccc'\n", | |||
|
68 | " self._box.border_width = 1\n", | |||
|
69 | " self._box.border_radius = 5\n", | |||
67 | "\n", |
|
70 | "\n", | |
68 | " self._modal_body = widgets.VBox()\n", |
|
71 | " self._modal_body = widgets.VBox()\n", | |
69 | " self._modal_body.overflow_y = 'scroll'\n", |
|
72 | " self._modal_body.overflow_y = 'scroll'\n", | |
@@ -71,7 +74,7 b'' | |||||
71 | " self._modal_body_label = widgets.HTML(value = 'Not hooked')\n", |
|
74 | " self._modal_body_label = widgets.HTML(value = 'Not hooked')\n", | |
72 | " self._modal_body.children = [self._modal_body_label]\n", |
|
75 | " self._modal_body.children = [self._modal_body_label]\n", | |
73 | "\n", |
|
76 | "\n", | |
74 |
" self._ |
|
77 | " self._box.children = [\n", | |
75 | " self._modal_body, \n", |
|
78 | " self._modal_body, \n", | |
76 | " ]\n", |
|
79 | " ]\n", | |
77 | " \n", |
|
80 | " \n", | |
@@ -82,7 +85,7 b'' | |||||
82 | " \"\"\"Close and remove hooks.\"\"\"\n", |
|
85 | " \"\"\"Close and remove hooks.\"\"\"\n", | |
83 | " if not self.closed:\n", |
|
86 | " if not self.closed:\n", | |
84 | " self._ipython.events.unregister('post_run_cell', self._fill)\n", |
|
87 | " self._ipython.events.unregister('post_run_cell', self._fill)\n", | |
85 |
" self._ |
|
88 | " self._box.close()\n", | |
86 | " self.closed = True\n", |
|
89 | " self.closed = True\n", | |
87 | " VariableInspectorWindow.instance = None\n", |
|
90 | " VariableInspectorWindow.instance = None\n", | |
88 | "\n", |
|
91 | "\n", | |
@@ -96,7 +99,7 b'' | |||||
96 | " def _ipython_display_(self):\n", |
|
99 | " def _ipython_display_(self):\n", | |
97 | " \"\"\"Called when display() or pyout is used to display the Variable \n", |
|
100 | " \"\"\"Called when display() or pyout is used to display the Variable \n", | |
98 | " Inspector.\"\"\"\n", |
|
101 | " Inspector.\"\"\"\n", | |
99 |
" self._ |
|
102 | " self._box._ipython_display_()\n" | |
100 | ] |
|
103 | ] | |
101 | }, |
|
104 | }, | |
102 | { |
|
105 | { | |
@@ -115,6 +118,34 b'' | |||||
115 | "cell_type": "markdown", |
|
118 | "cell_type": "markdown", | |
116 | "metadata": {}, |
|
119 | "metadata": {}, | |
117 | "source": [ |
|
120 | "source": [ | |
|
121 | "Pop the inspector out of the widget area using Javascript. To close the inspector, click the close button on the widget area that it was spawned from." | |||
|
122 | ] | |||
|
123 | }, | |||
|
124 | { | |||
|
125 | "cell_type": "code", | |||
|
126 | "execution_count": null, | |||
|
127 | "metadata": { | |||
|
128 | "collapsed": false | |||
|
129 | }, | |||
|
130 | "outputs": [], | |||
|
131 | "source": [ | |||
|
132 | "%%javascript\n", | |||
|
133 | "$('div.inspector')\n", | |||
|
134 | " .detach()\n", | |||
|
135 | " .prependTo($('body'))\n", | |||
|
136 | " .css({\n", | |||
|
137 | " 'z-index': 999, \n", | |||
|
138 | " position: 'fixed',\n", | |||
|
139 | " 'box-shadow': '5px 5px 12px -3px black',\n", | |||
|
140 | " opacity: 0.9\n", | |||
|
141 | " })\n", | |||
|
142 | " .draggable();" | |||
|
143 | ] | |||
|
144 | }, | |||
|
145 | { | |||
|
146 | "cell_type": "markdown", | |||
|
147 | "metadata": {}, | |||
|
148 | "source": [ | |||
118 | "# Test" |
|
149 | "# Test" | |
119 | ] |
|
150 | ] | |
120 | }, |
|
151 | }, | |
@@ -187,15 +218,21 b'' | |||||
187 | ], |
|
218 | ], | |
188 | "metadata": { |
|
219 | "metadata": { | |
189 | "kernelspec": { |
|
220 | "kernelspec": { | |
|
221 | "display_name": "IPython (Python 2)", | |||
|
222 | "name": "python2" | |||
|
223 | }, | |||
|
224 | "language_info": { | |||
190 | "codemirror_mode": { |
|
225 | "codemirror_mode": { | |
191 | "name": "python", |
|
226 | "name": "ipython", | |
192 | "version": 2 |
|
227 | "version": 2 | |
193 | }, |
|
228 | }, | |
194 | "display_name": "Python 2", |
|
229 | "file_extension": ".py", | |
195 |
" |
|
230 | "mimetype": "text/x-python", | |
196 |
"name": "python |
|
231 | "name": "python", | |
197 | }, |
|
232 | "nbconvert_exporter": "python", | |
198 | "signature": "sha256:474731659fb14b86672d1dafb2b497fa280082ab40a8a82fe2cde1b6d9b88a6e" |
|
233 | "pygments_lexer": "ipython2", | |
|
234 | "version": "2.7.6" | |||
|
235 | } | |||
199 | }, |
|
236 | }, | |
200 | "nbformat": 4, |
|
237 | "nbformat": 4, | |
201 | "nbformat_minor": 0 |
|
238 | "nbformat_minor": 0 |
@@ -258,196 +258,6 b'' | |||||
258 | } |
|
258 | } | |
259 | }, |
|
259 | }, | |
260 | "source": [ |
|
260 | "source": [ | |
261 | "### Popup" |
|
|||
262 | ] |
|
|||
263 | }, |
|
|||
264 | { |
|
|||
265 | "cell_type": "markdown", |
|
|||
266 | "metadata": {}, |
|
|||
267 | "source": [ |
|
|||
268 | "Unlike the other two special containers, the `Popup` is only **designed to display one set of widgets**. The `Popup` can be used to **display widgets outside of the widget area**. " |
|
|||
269 | ] |
|
|||
270 | }, |
|
|||
271 | { |
|
|||
272 | "cell_type": "code", |
|
|||
273 | "execution_count": null, |
|
|||
274 | "metadata": { |
|
|||
275 | "collapsed": false |
|
|||
276 | }, |
|
|||
277 | "outputs": [], |
|
|||
278 | "source": [ |
|
|||
279 | "counter = widgets.IntText(description='Counter:')\n", |
|
|||
280 | "popup = widgets.Popup(children=[counter], description='Popup Demo', button_text='Popup Button')\n", |
|
|||
281 | "display(popup)" |
|
|||
282 | ] |
|
|||
283 | }, |
|
|||
284 | { |
|
|||
285 | "cell_type": "code", |
|
|||
286 | "execution_count": null, |
|
|||
287 | "metadata": { |
|
|||
288 | "collapsed": false |
|
|||
289 | }, |
|
|||
290 | "outputs": [], |
|
|||
291 | "source": [ |
|
|||
292 | "counter.value += 1" |
|
|||
293 | ] |
|
|||
294 | }, |
|
|||
295 | { |
|
|||
296 | "cell_type": "code", |
|
|||
297 | "execution_count": null, |
|
|||
298 | "metadata": { |
|
|||
299 | "collapsed": false |
|
|||
300 | }, |
|
|||
301 | "outputs": [], |
|
|||
302 | "source": [] |
|
|||
303 | }, |
|
|||
304 | { |
|
|||
305 | "cell_type": "code", |
|
|||
306 | "execution_count": null, |
|
|||
307 | "metadata": { |
|
|||
308 | "collapsed": false |
|
|||
309 | }, |
|
|||
310 | "outputs": [], |
|
|||
311 | "source": [] |
|
|||
312 | }, |
|
|||
313 | { |
|
|||
314 | "cell_type": "code", |
|
|||
315 | "execution_count": null, |
|
|||
316 | "metadata": { |
|
|||
317 | "collapsed": false |
|
|||
318 | }, |
|
|||
319 | "outputs": [], |
|
|||
320 | "source": [] |
|
|||
321 | }, |
|
|||
322 | { |
|
|||
323 | "cell_type": "code", |
|
|||
324 | "execution_count": null, |
|
|||
325 | "metadata": { |
|
|||
326 | "collapsed": false |
|
|||
327 | }, |
|
|||
328 | "outputs": [], |
|
|||
329 | "source": [] |
|
|||
330 | }, |
|
|||
331 | { |
|
|||
332 | "cell_type": "code", |
|
|||
333 | "execution_count": null, |
|
|||
334 | "metadata": { |
|
|||
335 | "collapsed": false |
|
|||
336 | }, |
|
|||
337 | "outputs": [], |
|
|||
338 | "source": [] |
|
|||
339 | }, |
|
|||
340 | { |
|
|||
341 | "cell_type": "code", |
|
|||
342 | "execution_count": null, |
|
|||
343 | "metadata": { |
|
|||
344 | "collapsed": false |
|
|||
345 | }, |
|
|||
346 | "outputs": [], |
|
|||
347 | "source": [] |
|
|||
348 | }, |
|
|||
349 | { |
|
|||
350 | "cell_type": "code", |
|
|||
351 | "execution_count": null, |
|
|||
352 | "metadata": { |
|
|||
353 | "collapsed": false |
|
|||
354 | }, |
|
|||
355 | "outputs": [], |
|
|||
356 | "source": [] |
|
|||
357 | }, |
|
|||
358 | { |
|
|||
359 | "cell_type": "code", |
|
|||
360 | "execution_count": null, |
|
|||
361 | "metadata": { |
|
|||
362 | "collapsed": false |
|
|||
363 | }, |
|
|||
364 | "outputs": [], |
|
|||
365 | "source": [] |
|
|||
366 | }, |
|
|||
367 | { |
|
|||
368 | "cell_type": "code", |
|
|||
369 | "execution_count": null, |
|
|||
370 | "metadata": { |
|
|||
371 | "collapsed": false |
|
|||
372 | }, |
|
|||
373 | "outputs": [], |
|
|||
374 | "source": [] |
|
|||
375 | }, |
|
|||
376 | { |
|
|||
377 | "cell_type": "code", |
|
|||
378 | "execution_count": null, |
|
|||
379 | "metadata": { |
|
|||
380 | "collapsed": false |
|
|||
381 | }, |
|
|||
382 | "outputs": [], |
|
|||
383 | "source": [] |
|
|||
384 | }, |
|
|||
385 | { |
|
|||
386 | "cell_type": "code", |
|
|||
387 | "execution_count": null, |
|
|||
388 | "metadata": { |
|
|||
389 | "collapsed": false |
|
|||
390 | }, |
|
|||
391 | "outputs": [], |
|
|||
392 | "source": [] |
|
|||
393 | }, |
|
|||
394 | { |
|
|||
395 | "cell_type": "code", |
|
|||
396 | "execution_count": null, |
|
|||
397 | "metadata": { |
|
|||
398 | "collapsed": false |
|
|||
399 | }, |
|
|||
400 | "outputs": [], |
|
|||
401 | "source": [] |
|
|||
402 | }, |
|
|||
403 | { |
|
|||
404 | "cell_type": "code", |
|
|||
405 | "execution_count": null, |
|
|||
406 | "metadata": { |
|
|||
407 | "collapsed": false |
|
|||
408 | }, |
|
|||
409 | "outputs": [], |
|
|||
410 | "source": [] |
|
|||
411 | }, |
|
|||
412 | { |
|
|||
413 | "cell_type": "code", |
|
|||
414 | "execution_count": null, |
|
|||
415 | "metadata": { |
|
|||
416 | "collapsed": false |
|
|||
417 | }, |
|
|||
418 | "outputs": [], |
|
|||
419 | "source": [] |
|
|||
420 | }, |
|
|||
421 | { |
|
|||
422 | "cell_type": "code", |
|
|||
423 | "execution_count": null, |
|
|||
424 | "metadata": { |
|
|||
425 | "collapsed": false |
|
|||
426 | }, |
|
|||
427 | "outputs": [], |
|
|||
428 | "source": [ |
|
|||
429 | "counter.value += 1" |
|
|||
430 | ] |
|
|||
431 | }, |
|
|||
432 | { |
|
|||
433 | "cell_type": "code", |
|
|||
434 | "execution_count": null, |
|
|||
435 | "metadata": { |
|
|||
436 | "collapsed": false |
|
|||
437 | }, |
|
|||
438 | "outputs": [], |
|
|||
439 | "source": [ |
|
|||
440 | "popup.close()" |
|
|||
441 | ] |
|
|||
442 | }, |
|
|||
443 | { |
|
|||
444 | "cell_type": "markdown", |
|
|||
445 | "metadata": { |
|
|||
446 | "slideshow": { |
|
|||
447 | "slide_type": "slide" |
|
|||
448 | } |
|
|||
449 | }, |
|
|||
450 | "source": [ |
|
|||
451 | "# Alignment" |
|
261 | "# Alignment" | |
452 | ] |
|
262 | ] | |
453 | }, |
|
263 | }, | |
@@ -753,7 +563,7 b'' | |||||
753 | ] |
|
563 | ] | |
754 | ], |
|
564 | ], | |
755 | "kernelspec": { |
|
565 | "kernelspec": { | |
756 | "display_name": "Python 2", |
|
566 | "display_name": "IPython (Python 2)", | |
757 | "name": "python2" |
|
567 | "name": "python2" | |
758 | }, |
|
568 | }, | |
759 | "language_info": { |
|
569 | "language_info": { | |
@@ -766,9 +576,8 b'' | |||||
766 | "name": "python", |
|
576 | "name": "python", | |
767 | "nbconvert_exporter": "python", |
|
577 | "nbconvert_exporter": "python", | |
768 | "pygments_lexer": "ipython2", |
|
578 | "pygments_lexer": "ipython2", | |
769 |
"version": "2.7. |
|
579 | "version": "2.7.6" | |
770 |
} |
|
580 | } | |
771 | "signature": "sha256:198630bf2c2eb00401b60a395ebc75049099864b62f0faaf416da02f9808c40b" |
|
|||
772 | }, |
|
581 | }, | |
773 | "nbformat": 4, |
|
582 | "nbformat": 4, | |
774 | "nbformat_minor": 0 |
|
583 | "nbformat_minor": 0 |
General Comments 0
You need to be logged in to leave comments.
Login now