Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
README.md
UIDropdown.css
UIDropdown.js
example.js
index.html

README.md

UIDropdown

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

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

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} - стрелки дропдауна направленные в разные стороны

Описание:

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

Параметры:

Конструктор принимает два аргумента - первый аргумент - селектор или 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' - закрытие дропдауна только при нажатии на активный элемент или с помощью другого скрипта