Описание

Компонент позволяющий выводить кастомную информацию в dropdown (popover) на страницу.

Существует возможность задать размеры, элемент-родителя, контент, положение и наличие\отсутсвия стрелки у дропдауна

Скрипт импортирует конструктор UIDropdown. Предусмотрено подключение через require.js или CommonJS (либо использование глобальной переменной UIDropdown)

Пример использования: (Нажмите на черные квадраты)

Быстрый старт:


                    new UIDropdown([selector || jQuery], params)

например


                    new UIDropdown('.my-dropdown', {
                        content: 'Dropdown content'
                    })

Параметры:

Для работы со стилями необходимо подключить dropdown.css и|или определить классы:

dropdown - весь элемент dropdown
dropdown__content - контейнер в котором будет храниться контент
dropdown__arrow - стрелка дропдауна (если необходима)
dropdown__arrow_direction_{top, bottom, right, left} - стрелки дропдауна направленные в разные стороны

Конструктор принимает два аргумента - первый аргумент - селектор или jQuery объект, который дропдаун будет считать активным элементом и при нажатии на этот элемент будет показывать\скрывать дропдаун

Второй аргумент - объект со следующими параметрами:


        target - родительский элемент. Если определено null - dropdown будет находиться в том же блоке,
              что и активный элемент (вызывающий дропдаун) (По умолчанию null)

         position - положение dropdown'a. Возможные значения:
              'top' - сверху
              'bottom' - снизу (по умолчанию)
              'left' - слева
              'right' - справа

         arrow - положение стрелки. возможные значения
              'start' - стрелка расположена ближе к началу дропдауна
              'middle' - стрелка расположена в середине дропдауна
              'end' - стрелка расположена ближе к концу дропдауна
              null -  не отображать стрелку (по умолчанию)

         size - задает размеры dropdown'а. по умолчанию auto - dropdown определяет свой размер автоматически.
              формат данных - структура {width: ширина в px, height: высота в px}

         content - контент дропдауна. Принимает html, которую dropdown будет использовать как контент.
              Если content не определен, контент будет определяться по data-dropdown-content аттрибуту у активного элемента
              По умолчанию - content выбирается из data-dropdown-content

         close - закртие дропдауна.
              'auto' - закрытие дропдауна происходит при нажатии на любую область не принадлежащую дропдауну (по умолчанию)
              'manual' - закрытие дропдауна только при нажатии на активный элемент или с помощью другого скрипта

Методы

Для работы с методами UIDropdown можно использовать:

Ссылку на объект (возвращаемую с помощью new UIDropdown):


        open() - открывает dropdown программно

        changeContent(content) - изменяет контент дропдауна на {String} content

        close() - закрывает dropdown

Использование событий на активном элементе (например $el - есть активный элемент - элемент при клике на который вызывается dropdown)


        $el.trigger('open.dropdown') - открывает dropdown

        $el.trigger('close.dropdown') - закрывает dropdown

        $el.trigger('change.dropdown', content) - изменяет контент дропдауна на {String} content