Bootstrap Dropdown Menus Enhancement v3.1.1

от автора

Около года назад, я создал расширения выпадающих меню для Bootstrap v2 (хабрапост). В связи с пасхальными праздниками наконец нашлось время обновить функционал до версии 3 (Bootstrap v3).
Список функций:

  • Добавлена поддержка подменю
  • radio и checkbox
  • позиционирование
  • bullet


В новой версии весь css код переехал в отдельный файл и не вносит изменения в dropdown.less, а лишь расширяет его. Javascript код создан на основе dropdown.js из bootstrap, но по моему мнению немного улучшен. Например, меня пугала функция clearMenus:

function clearMenus(e) {     $(backdrop).remove()     $(toggle).each(function () {       var $parent = getParent($(this))       var relatedTarget = { relatedTarget: this }       if (!$parent.hasClass('open')) return       $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))       if (e.isDefaultPrevented()) return       $parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)     })   } // а далее такой код $(document).on('click.bs.dropdown.data-api', clearMenus) 

Т.е. каждый раз, при клике на странице, запускался вот этот быстрый код, который по сути ничего не делал если не имелось открытых меню. В моем исполнении функция закрывает только те меню, что были открыты api. Функцию clearMenus я сохранил и сделал публичной, внутренне она не используется, но при надобности ее можно вызвать извне $.fn.dropdown.clearMenus
Ну и само собой поддержка подменю, правда этот функционал новый и будет еще дорабатываться.
Оригинальный dropdown.js не нужен.

1. подменю

Разработчики убрали этот функционал из BS3.

Submenus just don’t have much of a place on the web right now, especially the mobile web. They will be removed with 3.0. — github.com/twbs/bootstrap/pull/6342#issuecomment-11594010

Например, в одном проекте, мне нужно было реализовать главное меню с двумя уровнями вложенности, которое складывается при меньшем разрешении (меню из navabar). Отсюда и появилась надобность в этом функционале. Смотрите первый пример чтобы лучше понять о чем речь.

2. radio и checkbox

Добавляет поддержку для radio и checkbox. Примеры.

2. позиционирование

Иногда требуется расположить меню выше кнопки или по центру. Для этого помимо стандартного .pull-right были внедрены новые классы .pull-top, .pull-center, .pull-middle.

3. bullet

Класс .bullet добавляет стрелочку к меню.


Буду рад любым комментариям, замечаниям, дополнениям. Спасибо за внимание.

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

ссылка на оригинал статьи http://habrahabr.ru/post/220295/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *