Bootstrap 4 - как работает автоматическое позиционирование Popover?
Мне нравится, когда мои всплывающие окна остаются открытыми, пока пользователь явно не закроет их.
Одной из приятных особенностей новых всплывающих окон Bootstrap является то, что они автоматически меняют положение, когда пользователь меняет ориентацию устройства, прокручивает или изменяет размер окна. Они даже следуют за тем, как содержимое перетекает - например, когда абзац оборачивается, а элемент увеличивается или уменьшается в длине, пока вы изменяете размер окна - все всплывающие окна на экране будут продолжать позиционироваться так, чтобы быть рядом с их целью.
Как плагин Popover узнает, что страница перетекает так, что запускает повторное позиционирование поповера?
Мое веб-приложение динамическое, пользовательские действия вызывают увеличение / сжатие элементов, включение / выключение и т. Д. В тот момент, когда я изменяю страницу с помощью кода, всплывающие окна остаются позади - они не перемещаются рядом с целью,
Один из способов обойти это, как пользователь, - просто немного прокрутить экран, и Bootstrap переместит всплывающие окна, и все снова будет выглядеть правильно.
Я пытаюсь найти способ изменения положения всплывающих окон при изменении макета страницы с помощью кода.
Отсюда вопрос: как работает позиционирование Popover (и могу ли я подключиться к нему, чтобы я мог запустить его автоматически).
РЕДАКТИРОВАТЬ: я только что заметил, что всплывающие окна будут хорошо позиционировать, если "динамический" контент оказывается Bootstrap navbar рушится / расширяется из-за крана на navbar-toggler,
2 ответа
В этом вопросе есть две части.
- Как popper.js узнает, когда обновлять всплывающие окна?
- Как поповер меняет положение?
Отвечая на это задом наперед:
2: Как поповер меняет положение?
Вам нужен метод обновления поповера:
$('#element').popover('update')
Я сделал быстрое демо здесь:
https://jsfiddle.net/pktyptyp/
Сначала нажмите зеленую кнопку, чтобы открыть поповер. Затем используйте кнопку 2 для перемещения переключателя. Теперь тумблер и поповер больше не выстраиваются в линию. Поэтому, наконец, используйте кнопку 3, чтобы изменить положение поповера с помощью его переключателя.
Документы для этого находятся в разделе методов popover здесь:
http://getbootstrap.com/docs/4.0/components/popovers/
Если вы хотите обновить каждый поповер на вашей странице, а не только конкретный, то вы можете сделать:
$('[data-toggle="popover"]').popover('update')
Как popper.js узнает, когда обновлять всплывающие окна?
Поппер будет подписываться на такие события, как window.scroll и window.resize. Вы можете увидеть это в небольшом количестве их исходного кода:
https://github.com/FezVrasta/popper.js/blob/master/packages/popper/src/utils/setupEventListeners.js
Метод обновления не будет вызываться немедленно в этом обработчике событий - будет что-то, что будет передано обратно в виджет Boostrap, который, в свою очередь, вызовет popover update метод.
Я уверен, что виджет Поппер и Поповер не будет смотреть на положение отдельных переключателей. Это отчасти потому, что, если переключатели не расположены, их свойства left / top всегда будут "auto", поэтому будет сложно разобраться, если они движутся. Или, другими словами, когда окно прокручивается, переключатель не перемещается в документе, но всплывающее окно (которое абсолютно позиционировано) нуждается в обновлении. Так что это немного общая кисть - они следят за изменением всего окна, предполагая, что всплывающие окна находятся вне позиции, а затем запускают больше событий для их обновления.
Если кто-то знает больше об этом, пожалуйста, сообщите мне в комментариях!
У вас есть некоторое преимущество в том, что вы знаете, когда меняете свой пользовательский интерфейс, поэтому вы можете вызывать "update" для всех Popovers по желанию. Это мне кажется идеальным подходом.
Однако, если ваши переключатели абсолютно позиционированы, вы можете сделать это немного более автоматически, наблюдая за их положением. Вот пример с абсолютно позиционированным переключателем, и в этом примере всплывающее окно перемещается автоматически без нажатия третьей кнопки.
Я не знаю, как логика работает за этим, потому что в Bootstrap мы используем Popper.js для обработки этого, поэтому, если вы хотите понять логику, что вы можете просматривать это: https://github.com/FezVrasta/popper.js