如何在 jupyter 笔记本仪表板的"Files" "Running" "Clusters"旁边添加一个选项卡？

Question

我想在jupyter笔记本的现有选项卡旁边添加一个新选项卡。我做了大量的研究，我总是回到名词延伸。但是，这些扩展在笔记本中提供更改。我(用PyCharm(编写了一些代码，用给定的文件进行一些计算。我想在jupyter笔记本电脑环境中实现相同的代码，方法是在菜单中添加一个选项卡(见图(，当用户点击选项卡时，会有一个带有更多选项和功能的界面。有人能帮我吗？

所需的新标签位置

类似nbgrader扩展的东西也不错。单击选项卡时，会出现一个新窗口。

nbgrader扩展

当点击标签时

Answer 1

我是用jquery写的，而不是纯javascript。。。。

define([
'base/js/namespace',
'jquery',
'base/js/utils',
'./my_new_extension_code'
], function(Jupyter, $, utils, MyMainObjectList) {
"use strict";
var ajax = utils.ajax || $.ajax;
// Notebook v4.3.1 enabled xsrf so use "notebooks ajax call" that includes the
// xsrf token in the header data
// This is the basic html framework the tab will switch to, when clicked
// Think of it as a Template
var myApp_html = $([
'<div id="myApp" class="tab-pane">',
'  <div id="myApp_toolbar" class="row list_toolbar">',
'    <div class="col-sm-8 no-padding">',
'      <h2 id="myApp_info" class="toolbar_info">My App Title</h2>',
'    </div>',
'    <div class="col-sm-4 no-padding tree-buttons">',
'      <span id="myApp_buttons" class="pull-right toolbar_buttons">',
'      <button id="refresh_myApp_list" title="Refresh myApp list"',
'              class="btn btn-default btn-xs"><i',
'                         class="fa fa-refresh"></i></button>',
'      </span>',
'    </div>',
'  </div>',
'  <div id="myApp_box_placeholder" class="row list_placeholder"',
'            style="display: none;">',
'    <div> Nothing to see here. </div>',
'  </div>',
'  <div id="myApp_box_error" class="row list_error" style="display: none;">',
'    <div></div>',
'  </div>',
'  <div class="alert alert-danger version_error">',
'  </div>',
'  <div class="alert info">',
'       Some info text, maybe.',
'  </div>',
'  <div id="myApp_box_loading" class="row list_loading" >',
'    <div> Please wait, this may take several minutes... </div>',
'    <div class="lds-dual-ring"></div>', 
'  </div>',
'  <div id="myApp_list" class="panel-group">',
'  </div>',
'</div>'
].join('n'));
// This is the method that load this extension
// 'MyMainObjectList' will be defined in the file 'my_new_extension_code'
// 'base_url' is whatever you need to call to get data to fill the template with
function load() {
var myApp_list = new MyMainObjectList(
'#myApp_list',
'#refresh_myApp_list',
{
base_url: /* whatever */,
}
);
var base_url = /* whatever */;
// If you have an external stylesheet, you need to add it to the head
//     section of the page.
$('head').append(
$('<link>')
.attr('rel', 'stylesheet')
.attr('type', 'text/css')
.attr('href', base_url + 'nbextensions/my_app/my_app.css')
);
// Add the template to the page (note, it will start hidden)
$(".tab-content").append(myApp_html);
// Add the tab that switches to your template.
$("#tabs").append(
$('<li>')
.append(
$('<a>')
.attr('href', '#myApp')
.attr('data-toggle', 'tab')
.text('My New Tab')
.click(function (e) {
window.history.pushState(null, null, '#myApp');
myApp_list.load_list();
console.log("My App Ran")
})
)
);
}
// The return is to load this extension
return {
load_ipython_extension: load
};
});