How can I add Actions to the tool-bar in the Dashboard of Jupyter Notebook?

问题

I'm creating a custom front-end extension for Jupyter Notebook. The actions will be triggered via buttons in the Notebook Dashboard and the Notebook Editor.

The extension will affect single or multiple files (like the already existing "Move", "Duplicate", etc -Buttons do). So the resulting button might look like this:

I can already place buttons in the tool-bar of the Notebook Editor, thanks to this tutorial, but I'm still unable to add actions to the toolbar in the Dashboard.

How can I add Actions to the tool-bar in the Dashboard of jupyter?

回答1:

You can use a bit of jQuery to get this effect. For instance, if you want your button to appear before the Delete button, you can add something like

$('<button/>')
    .addClass('my-new-button btn btn-default btn-xs')
    .attr('title', 'My New Button')
    .attr('aria-label', 'My New Button')
    .text('My New Button')
    .insertBefore('.delete-button')
    .on('click', function () {...});

This is a little fragile, because it relies on the '.delete-button' being in that location, but the docs note that the front-end API is not very stable anyways. In addition, the button will probably always be shown, since I haven't found a way to get access to the selected list and check whether the button should be displayed. Finally, this probably won't work with JupyterLab which is the future™

This could go in an nbextension (see frontend extensions and distributing extensions) to make it easier to install.

来源：https://stackoverflow.com/questions/45105546/how-can-i-add-actions-to-the-tool-bar-in-the-dashboard-of-jupyter-notebook

标签

javascript

jupyter-notebook