Около года назад, я создал расширения выпадающих меню для Bootstrap v2 (хабрапост). В связи с пасхальными праздниками наконец нашлось время обновить функционал до версии 3 (Bootstrap v3).
Список функций:
В новой версии весь css код переехал в отдельный файл и не вносит изменения в dropdown.less, а лишь расширяет его. Javascript код создан на основе dropdown.js из bootstrap, но по моему мнению немного улучшен. Например, меня пугала функция
Т.е. каждый раз, при клике на странице, запускался вот этотбыстрый код, который по сути ничего не делал если не имелось открытых меню. В моем исполнении функция закрывает только те меню, что были открыты api. Функцию
Ну и само собой поддержка подменю, правда этот функционал новый и будет еще дорабатываться.
Оригинальный dropdown.js не нужен.
Разработчики убрали этот функционал из BS3.
Добавляет поддержку для
Иногда требуется расположить меню выше кнопки или по центру. Для этого помимо стандартного
Класс
Буду рад любым комментариям, замечаниям, дополнениям. Спасибо за внимание.
PS: Страница на GitHub оформлена на английском языке. Я не очень силен в английском, поэтому буду рад любой помощи в исправлении неточностей и ошибок.
Список функций:
- Добавлена поддержка подменю
- 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)
Т.е. каждый раз, при клике на странице, запускался вот этот
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
добавляет стрелочку к меню.- Демо и документация
- Проект на GitHub
- Предыдущая версия: Демо GitHub
Буду рад любым комментариям, замечаниям, дополнениям. Спасибо за внимание.
PS: Страница на GitHub оформлена на английском языке. Я не очень силен в английском, поэтому буду рад любой помощи в исправлении неточностей и ошибок.