将javascript添加到我的plotly dash应用程序(python)

1hdlvixo 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(543)

我正在用python中的dash构建 Jmeter 板。我已经很好地配置了所有的图形（它在这里的服务器上运行），下一步是创建响应的导航栏和页脚。目前看起来是这样的：

当我缩小宽度时，它看起来是这样的：

我想给这个按钮添加功能，这样它会在点击时隐藏三个链接。我尝试使用javascript通过以下代码切换css“active”属性：

var toggleButton = document.getElementsByClassName('toggle-button')[0]
 var navBarLinks = document.getElementsByClassName('navbar-links')[0]

 function toggleFunction() {
     navBarLinks.classList.toggle('active')
 }

 toggleButton.addEventListener('click', toggleFunction)

基本上，当 navbar-links 类处于活动状态，我希望将其设置为 display: flex ，当它不处于活动状态时，我希望它处于活动状态 display: none python屏幕中定义的html元素如下：

html.Nav([

    html.Div('Covid-19 global data Dashboard', className='dashboard-title'),

    html.A([html.Span(className='bar'),
            html.Span(className='bar'),
            html.Span(className='bar')],
           href='#', className='toggle-button'),

    html.Div(
        html.Ul([
            html.Li(html.A('Linked-In', href='#')),
            html.Li(html.A('Source Code', href='#')),
            html.Li(html.A('CSV Data', href='#'))
        ]),
        className='navbar-links'),

], className='navbar')

我没想到通过javascript访问元素会出现问题。在做了一些研究之后，我发现javascript在执行 getElementsByClassName 函数返回的值为空。这是因为函数是在呈现页面之前运行的（据我所知）。它给了我这个错误：

这个项目越来越大，所以我不知道我应该在这篇文章中包括哪些部分，但我将分享git存储库和页面预览。有没有简单的解决办法？

python JavaScript plotly-dash css plotly

来源：https://stackoverflow.com/questions/68337654/adding-javascript-to-my-plotly-dash-app-python

2条答案

按热度按时间

z9smfwbn1#

dash回调解决方案（无javascript）：

import dash
import dash_html_components as html
from dash.dependencies import Output, Input, State

navbar_base_class = "navbar-links"

app = dash.Dash(__name__)

app.layout = html.Nav(
    [
        html.Div("Covid-19 global data Dashboard", className="dashboard-title"),
        html.A(
            id="toggle-button",
            children=[
                html.Span(className="bar"),
                html.Span(className="bar"),
                html.Span(className="bar"),
            ],
            href="#",
            className="toggle-button",
        ),
        html.Div(
            id="navbar-links",
            children=html.Ul(
                children=[
                    html.Li(html.A("Linked-In", href="#")),
                    html.Li(html.A("Source Code", href="#")),
                    html.Li(html.A("CSV Data", href="#")),
                ],
            ),
            className=navbar_base_class,
        ),
    ],
    className="navbar",
)

@app.callback(
    Output("navbar-links", "className"),
    Input("toggle-button", "n_clicks"),
    State("navbar-links", "className"),
    prevent_initial_call=True,
)
def callback(n_clicks, current_classes):
    if "active" in current_classes:
        return navbar_base_class
    return navbar_base_class + " active"

if __name__ == "__main__":
    app.run_server(debug=True)

上面代码的思想是 toggle-button 单击作为 Input 以及 navbar-links 作为 State . 我们可以使用此状态来确定是否应添加 active 类或删除它。新的 className 值在回调中返回。
javascript解决方案：

window.addEventListener("load", function () {
  var toggleButton = document.getElementsByClassName("toggle-button")[0];
  var navBarLinks = document.getElementsByClassName("navbar-links")[0];

  function toggleFunction() {
    navBarLinks.classList.toggle("active");
  }

  toggleButton.addEventListener("click", toggleFunction);
});

加载整个页面（包括样式表和图像等所有相关资源）时，将触发加载事件。这与domcontentloaded形成对比，domcontentloaded在页面dom加载后立即启动，而不等待资源完成加载。
https://developer.mozilla.org/en-us/docs/web/api/window/load_event DOMContentLoaded 最好使用，但它只适用于我 load .

赞(0）回复(0）举报 2021-09-13

lokaqttq2#

您可以推迟javascript代码的执行，直到通过 DeferScript 来自 Jmeter 板扩展的组件。这是一个小例子，

import dash
import dash_html_components as html
from html import unescape
from dash_extensions import DeferScript

mxgraph = r'{&quot;highlight&quot;:&quot;#0000ff&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom layers lightbox&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;xml&quot;:&quot;&lt;mxfile host=\&quot;app.diagrams.net\&quot; modified=\&quot;2021-06-07T06:06:13.695Z\&quot; agent=\&quot;5.0 (Windows)\&quot; etag=\&quot;4lPJKNab0_B4ArwMh0-7\&quot; version=\&quot;14.7.6\&quot;&gt;&lt;diagram id=\&quot;YgMnHLNxFGq_Sfquzsd6\&quot; name=\&quot;Page-1\&quot;&gt;jZJNT4QwEIZ/DUcToOriVVw1JruJcjDxYho60iaFIaUs4K+3yJSPbDbZSzN95qPTdyZgadm/GF7LAwrQQRyKPmBPQRzvktidIxgmwB4IFEaJCUULyNQvEAyJtkpAswm0iNqqegtzrCrI7YZxY7Dbhv2g3r5a8wLOQJZzfU4/lbByoslduPBXUIX0L0cheUrugwk0kgvsVojtA5YaRDtZZZ+CHrXzukx5zxe8c2MGKntNgknk8bs8fsj3+KtuDhxP+HZDVU5ct/RhatYOXgGDbSVgLBIG7LGTykJW83z0dm7kjklbaneLnEnlwFjoL/YZzb93WwNYgjWDC6EEdkuC0cZEO7p3i/6RF1WutL8nxmnkxVx6UcUZJIy/LgP49622mO3/AA==&lt;/diagram&gt;&lt;/mxfile&gt;&quot;}'
app = dash.Dash(__name__)
app.layout = html.Div([
    html.Div(className='mxgraph', style={"maxWidth": "100%"},**{'data-mxgraph': unescape(mxgraph)}),
    DeferScript(src='https://viewer.diagrams.net/js/viewer-static.min.js')
])

if __name__ == '__main__':
    app.run_server()

赞(0）回复(0）举报 2021-09-13

我来回答

将javascript添加到我的plotly dash应用程序(python)

2条答案

相关问题

热门标签

最新问答