Создание простого компонента всплывающей подсказки, который никогда не выходит за пределы экрана | Винсент Наветат | carwow Продукт, дизайн и разработка

Как интерфейсный разработчик, я видел множество UI-библиотек для всплывающих подсказок и всплывающих окон, но я никогда не чувствовал себя удовлетворенным ни одной из них.Может быть сложно заставить всплывающие подсказки соответствовать адаптивному дизайну с таким маленьким пространством на небольших окнах просмотра. Библиотеки, которые я пробовал до сих пор, либо не справляются с обработкой крайних случаев, либо требуют тяжелой работы в JavaScript для динамического позиционирования вспомогательного элемента. Вместо этого я решил создать веб-компонент с нуля, чтобы удовлетворить свои потребности простым подходом.

Если вы просто хотите увидеть демонстрацию и код, сразу переходите к CodePen. 💅

Я использовал веб-компоненты, чтобы упростить повторное использование шаблона пользовательского интерфейса и извлечь выгоду из предлагаемых ими обратных вызовов жизненного цикла.Позже в этом посте я продемонстрирую другие преимущества этого выбора.

Структура HTML очень проста, всплывающая подсказка включает в себя 2 элемента контейнера для метки и раскрывающегося списка. Это позволит им обоим содержать богатый контент, а не просто текст.

Моя первоначальная идея - максимально использовать преимущества CSS. Мы можем легко создать всплывающую подсказку для экранов рабочего стола, используя псевдокласс : hover . Недостатком этого подхода является то, что нам нужно другое поведение на сенсорных экранах, где пользователи ожидают, что смогут закрыть всплывающую подсказку, нажав ярлык во второй раз или нажав в любом месте экрана.

Обработка событий CSS hover на сенсорных экранах может быть сложной задачей, поскольку браузеры будут интерпретировать их по-разному. Чтобы упростить задачу, я решил использовать мультимедийную функцию CSS, чтобы только устройства, поддерживающие наведенные элементы, обрабатывали всплывающие подсказки при открытии / закрытии через CSS. Другие устройства вместо этого будут полагаться на JS и события касания. Если вам действительно нужна поддержка устаревших браузеров, таких как Internet Explorer, не пугайтесь отсутствия поддержки функции мультимедиа, вы можете использовать Browserhacks, чтобы специально настроить таргетинг на определенные браузеры, на которые полагается ваша аудитория.

CSS, необходимый для этого подхода, минимален. Идея состоит в том, чтобы установить контейнер с position: relative , в то время как раскрывающийся список имеет position: absolute , и мы можем использовать комбинацию left: 50% и transform: translateX (-50%) , чтобы иметь всплывающая подсказка в центре метки по горизонтали.

Чтобы открыть всплывающую подсказку, мы используем класс с модификатором (после БЭМ) всплывающая подсказка - откройте . Это переключает свойство display раскрывающегося списка на block и запускает CSS-анимацию для быстрого эффекта плавного появления.

С точки зрения JavaScript, использование веб-компонентов позволяет нам использовать синтаксис класса из ES6, который улучшает читаемость кода. Мы можем использовать connectedCallback для настройки прослушивателей событий, когда пользовательский элемент подключен к DOM. Затем мы можем переключить всплывающую подсказку - открыть класс для родительского элемента в событиях touchstart .

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

Основная проблема всплывающих подсказок в мире адаптивного дизайна заключается в том, что мы никогда не можем предсказать, где будет размещена метка. В идеале всплывающая подсказка может запускаться из любого элемента, включая слово в абзаце, который является плавным элементом в зависимости от размера его контейнера.

Обычно это плохо заканчивается тем, что всплывающие подсказки исчезают с экрана и обрезается контент, что вызывает разочарование у пользователей. Существуют умные решения для управления динамическим позиционированием, чтобы элементы всегда оставались видимыми на экранах, например Popper.js. Однако ~ 6 КБ уменьшенного и сжатого с помощью сжатия кода JavaScript - это довольно много, чтобы просто разместить небольшой блок текста на экране. Учитывая стоимость использования МБ JS для пользователей в наши дни, я бы предпочел более легкий подход.

Чтобы найти простое решение, я сократил все, что мне было нужно, до самого простого варианта. Если раскрывающийся список выходит из нижней части метки, а не из любого положения (слева, справа, вверху слева и т. Д.), Это означает, что раскрывающийся список может переполняться только с горизонтальных сторон. Чтобы предотвратить переполнение, мне нужно только проверить открытое событие, чтобы позиция элемента не превышала левый и правый пределы экрана.В этой ситуации простой перевод элемента с помощью CSS transform сбросит позицию обратно на экран.

В ситуации, когда метка размещается в левом или правом конце экрана, раскрывающееся меню всплывающей подсказки будет зафиксировано сбоку от сетки веб-сайта. Единственная оставшаяся ситуация, когда всплывающая подсказка может выйти за пределы экрана, - это если элемент находится внизу страницы, когда пользователь нажимает на него. Пользователи по-прежнему могут настраивать его, прокручивая страницу вниз, чтобы можно было просматривать содержимое.Я не ожидаю, что эта ситуация будет достаточно проблематичной, чтобы ввести больше кода JS для ее программного решения.

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

Более сильным аргументом в пользу веб-компонентов было то, как они взаимодействуют с виртуальной DOM. В carwow мы используем Elm, когда нам нужно управление состоянием в частях веб-сайта с высокой интерактивностью на стороне клиента.Обратной стороной встроенного приложения, использующего виртуальную модель DOM на веб-странице, является то, что у него нет прямого доступа к объекту Window . В этом контексте может быть непросто сделать всплывающую подсказку, реагирующую на область просмотра браузера. В случае приложения Elm мы могли бы справиться с этим с помощью портов.

К счастью, мы нашли альтернативное решение с использованием пользовательских элементов внутри Elm, которое позволяет ассоциированному JS работать так, как ожидалось. Для получения дополнительной информации о возможностях, которые он предлагает, я бы порекомендовал этот доклад Люка Вестби на Elm Europe 2018.

Посмотрите на CodePen ниже или на компонент нашей прекрасной дизайн-системы.

Если у вас есть какие-либо вопросы или мысли по поводу нашего подхода, мы будем рады их услышать!

JavaScript · Bootstrap 3.3.6 Документация

Индивидуальный или составной

могут быть включены индивидуально (с использованием отдельных файлов Bootstrap * .js ) или все сразу (с использованием bootstrap.js или уменьшенного bootstrap.min.js ).

Использование скомпилированного JavaScript

Оба файла bootstrap.js и bootstrap.min.js содержат все плагины в одном файле. Включите только один.

Зависимости плагинов

Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины по отдельности, обязательно проверьте эти зависимости в документации. Также обратите внимание, что все плагины зависят от jQuery (это означает, что jQuery должен быть включен перед файлами плагина). Проконсультируйтесь с нашим bower.json , чтобы узнать, какие версии jQuery поддерживаются.

Атрибуты данных

Вы можете использовать все плагины Bootstrap только через API разметки, не написав ни одной строчки JavaScript. Это первоклассный API Bootstrap, и вы должны в первую очередь учитывать его при использовании плагина.

Тем не менее, в некоторых ситуациях может потребоваться отключить эту функцию. Поэтому мы также предоставляем возможность отключить API атрибутов данных, отключив все события в документе с пространством имен data-api .Это выглядит так:

  $ (документ) .off ('. Data-api')  

В качестве альтернативы, чтобы настроить таргетинг на конкретный плагин, просто включите имя плагина в качестве пространства имен вместе с пространством имен data-api, например:

  $ (документ) .off ('. Alert.data-api')  

Только один плагин на элемент через атрибуты данных

Не используйте атрибуты данных из нескольких плагинов в одном элементе. Например, кнопка не может одновременно иметь всплывающую подсказку и переключать модальное окно.Для этого используйте оборачивающий элемент.

Программный API

Мы также считаем, что вы сможете использовать все плагины Bootstrap исключительно через JavaScript API. Все общедоступные API-интерфейсы являются одиночными, объединяемыми в цепочку методами и возвращают коллекцию, на которую были выполнены действия.

  $ ('. Btn.danger'). Button ('toggle'). AddClass ('fat')  

Все методы должны принимать необязательный объект параметров, строку, нацеленную на конкретный метод, или ничего (что запускает плагин с поведением по умолчанию):

  $ ('# myModal').modal () // инициализируется значениями по умолчанию
$ ('# myModal'). modal ({keyboard: false}) // инициализируется без клавиатуры
$ ('# myModal'). modal ('show') // инициализирует и немедленно вызывает show  

Каждый плагин также предоставляет свой необработанный конструктор в свойстве Constructor : $ .fn.popover.Constructor . Если вы хотите получить конкретный экземпляр плагина, получите его прямо из элемента: $ ('[rel = "popover"]'). Data ('popover') .

Настройки по умолчанию

Вы можете изменить настройки по умолчанию для плагина, изменив его конструктор .DEFAULTS объект:

  $ .fn.modal.Constructor.DEFAULTS.keyboard = false // изменяет значение по умолчанию для опции `keyboard` модального плагина на false  

Нет конфликта

Иногда необходимо использовать плагины Bootstrap с другими фреймворками пользовательского интерфейса. В этих обстоятельствах иногда могут возникать конфликты пространств имен.Если это произойдет, вы можете позвонить по номеру .noConflict для плагина, значение которого вы хотите вернуть.

  var bootstrapButton = $ .fn.button.noConflict () // вернуть $ .fn.button к ранее присвоенному значению
$ .fn.bootstrapBtn = bootstrapButton // дать $ (). bootstrapBtn функциональность Bootstrap  

События

Bootstrap предоставляет настраиваемые события для уникальных действий большинства плагинов. Как правило, они бывают в форме инфинитива и причастия прошедшего времени - где инфинитив (напр. show ) запускается в начале события, а его форма прошедшего причастия (например, показано ) запускается при завершении действия.

Начиная с 3.0.0, все события Bootstrap имеют пространство имен.

Все инфинитивные события обеспечивают функциональность preventDefault . Это дает возможность остановить выполнение действия до его запуска.

  $ ('# myModal'). On ('show.bs.modal', function (e) {
  if (! data) return e.preventDefault () // останавливает отображение модального окна
})  

Номера версий

Доступ к версии каждого из подключаемых модулей jQuery Bootstrap можно получить через свойство VERSION конструктора подключаемого модуля.Например, для плагина всплывающей подсказки:

  $ .fn.tooltip.Constructor.VERSION // => "3.3.6"  

Нет специальных резервных вариантов при отключенном JavaScript

Bootstrap не особо изящно отключаются, когда JavaScript отключен. Если вы заботитесь о пользовательском опыте в этом случае, используйте

Сторонние библиотеки

Bootstrap официально не поддерживает сторонние библиотеки JavaScript , такие как Prototype или jQuery UI.Несмотря на .noConflict и события в пространстве имен, могут возникнуть проблемы совместимости, которые необходимо исправить самостоятельно.

О переходах

Для простых эффектов перехода включите transition.js один раз вместе с другими файлами JS. Если вы используете скомпилированный (или минимизированный) bootstrap.js , нет необходимости включать его - он уже есть.

Что внутри

Transition.js - это базовый помощник для событий transitionEnd , а также эмулятор перехода CSS.Он используется другими плагинами для проверки поддержки переходов CSS и для обнаружения зависших переходов.

Отключение переходов

Переходы можно глобально отключить с помощью следующего фрагмента кода JavaScript, который должен появиться после загрузки transition.js (или bootstrap.js или bootstrap.min.js , в зависимости от обстоятельств):

  $ .support.transition = false  

Модальные окна - это упрощенные, но гибкие диалоговые окна с минимально необходимой функциональностью и интеллектуальными настройками по умолчанию.

Несколько открытых модальных окон не поддерживаются

Не открывайте модальное окно, пока другое все еще видно. Для одновременного отображения нескольких модальных окон требуется специальный код.

Размещение модальной разметки

Всегда старайтесь размещать HTML-код модального окна на верхнем уровне в вашем документе, чтобы другие компоненты не влияли на внешний вид и / или функциональность модального окна.

Из-за того, как HTML5 определяет свою семантику, атрибут autofocus HTML не действует в модальных окнах Bootstrap. Чтобы добиться того же эффекта, используйте собственный JavaScript:

  $ ('# myModal'). On ('shown.bs.modal', function () {
  $ ('# myInput'). фокус ()
})  

Примеры

Статический пример

Визуализированное модальное окно с заголовком, телом и набором действий в нижнем колонтитуле.

  

  

    

      

          & times;  
        
 Модальный заголовок 
      
      

        
 Одно прекрасное тело & hellip; 
      
      

         Закрыть 
         Сохранить изменения 
      
    
 
  
 
   

Живая демонстрация

Переключите модальное окно с помощью JavaScript, нажав кнопку ниже. Он будет скользить вниз и исчезать из верхней части страницы.

Текст в модальном окне

Duis mollis, est nonmodo luctus, nisi erat porttitor ligula.

Поповер в модальном окне

Эта кнопка должна вызывать всплывающее окно при нажатии.

Подсказки в модальном окне

Эта ссылка и эта ссылка должны иметь всплывающие подсказки при наведении курсора.

Переполняющий текст для отображения поведения прокрутки

Cras mattis conctetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros.

Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis conctetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros.

Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis conctetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros.

Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Запустить демонстрационный модальный режим

  

  Запустить демонстрационный модальный режим




  

    

      

          & times;  
        
 Модальный заголовок 
      
      

        ...
      
      

         Закрыть 
         Сохранить изменения 
      
    
  
  

Сделать модальные окна доступными

Не забудьте добавить role = "dialog" и aria-labelledby = "..." со ссылкой на модальный заголовок в .modal и role = "document" в .сам модальный диалог .

Кроме того, вы можете дать описание вашего модального диалога с помощью aria, описанного на .modal .

Встраивание видео с YouTube

Встраивание видео YouTube в модальные окна требует дополнительного JavaScript не в Bootstrap для автоматической остановки воспроизведения и т. Д. См. Этот полезный пост о переполнении стека для получения дополнительной информации.

Дополнительные размеры

имеют два дополнительных размера, доступных через классы модификаторов, которые можно разместить на .модальный диалог .

Большой модальный Малый модальный

  
 Большой модальный 


  

    

      ...
    
  



 Маленький модальный 


  

    

      ...
    
  
  

Удалить анимацию

Для модальных окон, которые просто появляются, а не исчезают при просмотре, удалите класс .fade из модальной разметки.

  

  ...
  

Использование системы координат

Чтобы воспользоваться преимуществами системы сеток Bootstrap в модальном окне, просто вложите .row в .modal-body , а затем использовать классы нормальной сетки.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-2 .col-md-offset-4

.col-md-6 .col-md-offset-3

Уровень 2: .col-XS-8 .col-sm-6

Уровень 2: .col-xs-4 .col-sm-6

Запустить демонстрационный модальный режим

  

  

    

      

          & times;  
        
 Модальный заголовок 
      
      

        

          
.col-md-4 
          
 .col-md-4 .col-md-offset-4 
        
        

          
 .col-md-3 .col-md-offset-3 
          
 .col-md-2 .col-md-offset-4 
        
        

          
 .col-md-6 .col-md-offset-3 
        
        

          

            Уровень 1: .col-sm-9
            

              

                Уровень 2: .col-XS-8 .col-sm-6
              
              

                Уровень 2: .col-xs-4 .col-sm-6
              
            
          
        
      
      

         Закрыть 
         Сохранить изменения 
      
    
 
  
 
   

У вас есть несколько кнопок, которые запускают одно и то же модальное окно, только с немного разным содержанием? Используйте атрибуты event.relatedTarget и HTML data- * (возможно, через jQuery), чтобы изменять содержимое модального окна в зависимости от того, какая кнопка была нажата. См. Документацию по модальным событиям для получения подробной информации о relatedTarget ,

   Открыть модальное окно для @mdo 
 Открыть модальный для @fat 
 Открыть модальное окно для @getbootstrap 
...больше кнопок ...


  

    

      

          & times;  
        
 Новое сообщение 
      
      

        <форма>
          

             Получатель: 
            
          
          

             Сообщение: 
             
          
        
      
      

         Закрыть 
         Отправить сообщение 
      
    
  
  

  $ ('# exampleModal').on ('show.bs.modal', функция (событие) {
  var button = $ (event.relatedTarget) // Кнопка, запускающая модальное окно
  var recipient = button.data ('Any') // Извлекаем информацию из атрибутов data- *
  // При необходимости вы можете инициировать здесь запрос AJAX (а затем выполнить обновление в обратном вызове).
  // Обновляем содержимое модального окна. Здесь мы будем использовать jQuery, но вместо этого вы можете использовать библиотеку привязки данных или другие методы.
  var modal = $ (это)
  modal.find ('. modal-title'). text ('Новое сообщение' + получателю)
  модальный.find ('. ввод модального тела'). val (получатель)
})  

Использование

Модальный плагин переключает ваш скрытый контент по запросу с помощью атрибутов данных или JavaScript. Он также добавляет .modal-open к , чтобы переопределить поведение прокрутки по умолчанию, и генерирует .modal-backdrop , чтобы предоставить область щелчка для отклонения отображаемых модальных окон при щелчке вне модального окна.

Через атрибуты данных

Активировать модальное окно без написания JavaScript.Установите data-toggle = "modal" на элементе контроллера, например кнопке, вместе с data-target = "# foo" или href = "# foo" , чтобы выбрать конкретный модальный элемент для переключения.

   Запуск модального окна   

Через JavaScript

Вызов модального окна с идентификатором myModal с помощью одной строки JavaScript:

  $ ('# myModal'). Модальный (параметры)  

Опции

Параметры могут передаваться через атрибуты данных или JavaScript.Для атрибутов данных добавьте имя параметра к data- , как в data-backdrop = "" .

   Нажми меня   

Методы

Активирует ваш контент как модальный. Принимает необязательные параметры , объект .

  $ ('# myModal'). Modal ({
  клавиатура: ложь
})  

Переключает модальное окно вручную. Возврат к вызывающей стороне до того, как модальное окно было фактически показано или скрыто (т.е. перед событием shown.bs.modal или hidden.bs.modal ).

  $ ('# myModal'). Modal ('toggle')  

Открывает модальное окно вручную. Возврат к вызывающей стороне до фактического отображения модального окна (т.е. до того, как произойдет событие shown.bs.modal ).

  $ ('# myModal'). Модальный ('показать')  

Вручную скрывает модальное окно. Возврат к вызывающей стороне до фактического скрытия модального окна (т.е. до того, как произойдет событие hidden.bs.modal ).

  $ ('# myModal'). Модальный ('скрыть')  

Изменяет положение модального окна для противодействия полосе прокрутки в случае, если она должна появиться, что приведет к переходу модального окна влево.

Требуется только при изменении высоты модального окна, когда оно открыто.

  $ ('# myModal').модальный ('handleUpdate')  

События

Bootstrap предоставляет несколько событий для подключения к модальным функциям.

Все модальные события запускаются в самом модальном окне (то есть в