как использовать команду dash_html_components.Script - PullRequest
Новая
       10

как использовать команду dash_html_components.Script

0 голосов
/ 23 июня 2018

Я хотел бы преобразовать приведенный ниже код в штрих-код.Могу ли я узнать, как перевести второй тег сценария в HTML-коде в dash-plotly? 

.summary:hover+.detail,
.detail:hover {
  display: block;
}

.show.detail {
  display: block;
}

.detail {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <a class="summary" href="javascript:void(0);">Sample1</a>
  <div class="detail">Detail of this summary</div>
</div>
<div class="wrapper">
  <a class="summary" href="javascript:void(0);">Sample2</a>
  <div class="detail">Detail of this summary</div>
</div>

<div class="wrapper">
  <a class="summary" href="javascript:void(0);">Sample3</a>
  <div class="detail">Detail of this summary</div>
</div>

<script>
  $(".summary").on("click", function() {
    $(this).next().toggleClass("show");
  })
</script>

1 Ответ

0 голосов
/ 12 июля 2018

Вы можете построить ту же самую HTML-структуру внутри графика.
Следующий код является рабочим примером.

Требование: ваш код CSS должен храниться в static / stylesheet.css

Пример: 

import dash
import dash_core_components as dcc
import dash_html_components as html

from flask import send_from_directory
import os

app = dash.Dash(__name__)
server = app.server

# Configure Samples
sample1 = html.Div([
                dcc.Link('Sample1', href='javascript:void(0);', className='summary'),
                html.Div('Details of this summary', className='detail')
], className='wrapper')

sample2 = html.Div([
                dcc.Link('Sample2', href='javascript:void(0);', className='summary'),
                html.Div('Details of this summary', className='detail')
], className='wrapper')

sample3 = html.Div([
                dcc.Link('Sample3', href='javascript:void(0);', className='summary'),
                html.Div('Details of this summary', className='detail')
], className='wrapper')
# Define layout
app.layout = html.Div([
    sample1,
    sample2,
    sample3
])

app.scripts.append_script({"external_url": [
        "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
]})

# Add css file (locally hosted)
app.css.append_css({"external_url": [
    "static/stylesheet.css"
]})

# Serving local static files
@app.server.route('/static/<path:path>')
def static_file(path):
    static_folder = os.path.join(os.getcwd(), 'static')
    return send_from_directory(static_folder, path)

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