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 оформлена на английском языке. Я не очень силен в английском, поэтому буду рад любой помощи в исправлении неточностей и ошибок.
    Support the author
    Share post

    Similar posts

    Comments 19

      +3
      Как мне кажется, не хватает раскрытия меню по onmouseover. Не сразу понятно, что меню раскрывается по клику.
        +2
        Запланирован. Пока думаю как это правильнее реализовать.
          0
          Надо выбор предложить, чтобы и так и так было.
            +3
            Вот onmouseover на вложенное меню точно нужен.
            0
            Моё мнение — не нужно. Что потом делать с этими mousover меню людям с мобильных устройств и прочих тач-интерфейсов?
            0
            Я использую www.bootply.com/86684 — подменю раскрываются при наведении указателя.
            +2
            Ещё бы кто-нибудь сделал из этого модуль к Angular.
              0
              Круто, то что надо, спасибо!
                0
                Очень вовремя, лично для меня :)
                Спасибо!
                  +3
                  Много секунд думал над тем, как работают эти контролы. Это говорит о том, что интуитивная понятность не достигнута. Добавьте чекбоксы там, где должны быть чекбоксы, добавьте радиокнопки там, где должны быть радиокнопки, и, возможно, станет лучше. В нынешнем виде это решение я бы не стал применять.
                    0
                    Не знаю, я сразу просек все фишки. Отличная замена уродливым селектам.
                      0
                      Селекты выглядят одинаково, но работают по-разному. Как меню, как переключатель (радиокнопка) и как множественный выбор (чекбокс). Это и сбивает с толку.
                        –1
                        Как вариант, вы можете вставить свои иконки чекбоксов и радиокнопок перед опциями. Это даже лучше, чем юзать — опять же — уродливые нативные.
                          +1
                          Об этом я и написал двумя комментариями выше. И да, нативные — не уродливые.
                            –1
                            На ретине возможно
                    0
                    Это css+js? Или читый css?
                      0
                      Из поста:
                      … В моем исполнении функция закрывает только те меню, что были открыты api. ...

                      CSS + JS
                        –1
                        JS же умирает…

                    Only users with full accounts can post comments. Log in, please.