Big menu with dataview.

Необходимо создать меню с большим количеством пунктов.
Основные требования:
1. Все пункты меню должны быть доступны в всплывающем окне (popup/sidemenu).
2.Максимальное использование свободного пространства по ширине и высоте окна браузера. Так как количество пунктов меню может меняться в зависимости от ситуации.

Для реализации выбран контрол dataview с собственным шаблоном (по клику кнопок m5 и m6).
https://snippet.webix.com/fejl7q5v
С помощью шаблона удалось занять свободное пространство по ширине экрана.
Проблемы:
1. Как динамически изменить высоту всплывающего окна под высоту dataview, но не более высоты окна браузера (за вычетом высоты toolbar)?
2. Если ширина окна меньше 600, то dataview по ширине не уменьшается и становится нечитаемым. Почему?

Возможно, Вы предложите более удачную реализацию такой задачи "Большого меню". Более простую, с простой реализацией кликабельности пунктов меню.

It is necessary to create a menu with a lot of items.
Primary requirements:
1. All menu items must be available in a popup window (popup / sidemenu).
2.Maximum use of free space in the width and height of the browser window. Since the number of menu items may vary depending on the situation.

For implementation, the dataview control with its own template is selected (by clicking the m5 and m6 buttons).
https://snippet.webix.com/fejl7q5v
Using the template, we managed to take up free space across the width of the screen.
Problems:
1. How to dynamically change the height of the popup to fit the dataview, but not more than the height of the browser window (minus the toolbar height)?
2. If the window width is less than 600, then the dataview is not reduced in width and becomes unreadable. Why?

Perhaps you can suggest a better implementation of this "Big Menu" task. With a simpler implementation of the clickability of menu items.

Tagged:

Comments

  • В данном случае для меню удобнее будет использовать обычный template с autoheight, встроенный в scrollview: https://snippet.webix.com/z5oidycv
    В примере есть функция getInfoList (строка 122), которая возвращает строку с html-контентом для template.

    В init методе MainMenu можно получить начальные данные, а при открытии окна (showMenu, строка 113) генерировать html на основе этих данных и задавать его в template.
    Клик по каждой опции меню можно отследить с помощью обработчиов onClick, которые задаются на class name элементов внутри template.

    Размер окна устанавливается в его событии onBeforeShow. Размер меню получается там с помощью webix.html.getTextSize
    Также можно переиспользовать одно view окна с разными данными: в этом примере в showMenu в зависимости от места вызова (кнопки) меняется количество опций, которые должны быть отображены, после чего заново генерируется html.

  • Спасибо, @Listopad, за подробный ответ и пример.
    Очень интересное решение.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion