Блог

Главная - Вопросы по программированию - Возможно ли получить текущую позицию ipywidget?

Возможно ли получить текущую позицию ipywidget?

#python #vuetify.js #ipywidgets

#python #vuetify.js #ipywidgets

Вопрос:

Я использую ipyvuetfy библиотеку, которая создает хороший элемент vuetify.js панели мониторинга на основе библиотеки и ipyvwidgets .

Мне нужно разместить диалоговое окно в определенной позиции (поверх другого элемента), например, это меню, размещенное поверх выбранной папки btn.

введите описание изображения здесь

Как я могу получить доступ к текущей позиции виджета относительно окна?

Комментарии:

1. Не могли бы вы включить снимок экрана в качестве примера? Вы имеете в виду «выше», а не «поверх» другого элемента?

2. Поскольку он должен быть поверх кнопки, почему бы не использовать v.Menu, как в примере ipyvuetify?

3. в примере я использую v.Меню, но, как указано в вопросе, мне нужно разместить v.Диалоговое окно

Ответ №1:

Это возможно с помощью кода Javascript, путем идентификации виджета с помощью пользовательского класса и использования метода jQuery offset(), а затем установки свойств стиля DOM top и left дочернего элемента (здесь Card) диалогового окна ipyvuetify со стилем position , установленным как fixed . Я не нашел, как выполнить код JS через слот активатора диалога, поэтому виджет диалога запускается через click.stop событие:

 import ipyvuetify as v
import ipywidgets as w

from IPython.display import Javascript

out = w.Output(layout={'display': 'none'})

js = '''
var x = $(".myparentwidget").offset();
var d = document.getElementsByClassName("mydialog")[0]; 
d.style.top = x.top "px"; 
d.style.left= x.left "px";'''

def on_click(widget, event, data):
    dialog.v_model=True
    with out:
        display(Javascript(js, lib="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"))

btn = v.Btn(
    children=["Open dialog"],
    class_='myparentwidget'
)
btn.on_event("click.stop", on_click)

dialog = v.Dialog(
    v_model=False,
    children=[
        v.Card(
            class_='mydialog',
            style_="position: fixed; width: 300px",
            children=[
                v.CardTitle(children=["Dialog window"]),
                v.CardText(children=['Dialog text']),
            ]
        )
    ],
)

v.Layout(children=[btn,dialog,out])