python笔记本显示功能中的jquery

Question

有没有办法在 python 笔记本中调用的显示函数中运行 jQuery？ 我希望能够组织（排序）一些在笔记本中生成和显示的 div。

静态js+html版本即可。不是来自笔记本。

import matplotlib.pyplot as plt
import numpy as np
from IPython.display import HTML, display

width = 300
height = 200
dpi = 100


# Create images
for i in range(5):
    filePNG = 'image_%02d.png' %(i+1)
    fig = plt.figure(figsize=(width/dpi, height/dpi), dpi=dpi)
    plt.plot(np.random.rand(10))
    plt.ylabel('some numbers')
    plt.savefig(filePNG)
    plt.close(fig)

# Display
html_code = ''
for i in range(5):
    filePNG = 'image_%02d.png' %(i+1)
    html_code += '''
                    <div style='float: left; border: 1px solid lightgray;'>
                            <img style='width: 100%%;' src='%s' />
                    </div>
                 ''' % (filePNG)
js_code = '''
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
    <script>
        $( function() {
            $("#sortable").sortable();
        });
    </script>
            '''

display(HTML(js_code + '<div id="sortable">' + html_code + '</div>'))

正如所写，相同的代码可以在 html 页面上运行。 有关信息：https://jqueryui.com/sortable/

ipywidget 输出是否可行？

Answer 1

问题是您使用了错误的 JQuery 版本。您需要使用笔记本正在使用的相同 JQuery（当前

3.5.1

），否则您最终将得到两个相互冲突的版本。

您可以通过以下方式检查 Jupyter 笔记本中的 JQuery 版本：

display(Javascript('alert($().jquery)'))

这是您的工作代码：

import matplotlib.pyplot as plt
import numpy as np
from IPython.display import HTML, Javascript, display
import base64

width = 300
height = 200
dpi = 100


# Create images
for i in range(5):
    filePNG = 'image_%02d.png' %(i+1)
    fig = plt.figure(figsize=(width/dpi, height/dpi), dpi=dpi)
    plt.plot(np.random.rand(10))
    plt.ylabel('some numbers')
    plt.savefig(filePNG)
    plt.close(fig)

# Display
html_code = ''
for i in range(5):
    filePNG = 'image_%02d.png' %(i+1)
    html_code += '''
                    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
                    <script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
                    <div style='float: left; border: 1px solid lightgray;'>
                            <img style='width: 100%%;' src='%s' />
                    </div>
                 ''' % (filePNG)

js_code = '''
        $( function() {
            $("#sortable").sortable();
        });
'''
display(HTML('<div id="sortable">' + html_code + '</div>'))
display(Javascript(js_code))

实际上，您不需要上传任何 JQuery 或 JQuery-UI 库，因为它们已经在笔记本中可用。你可以用

看到这个

display(Javascript('alert("JQuery: "+$().jquery + ", JQuery-UI: " + $.ui.version)'))

（我明白

JQuery: 3.5.1, JQuery-UI: 1.12.1

）

因此，如果删除这些行，代码也将起作用

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>