Bootstrap Dropdown Menus Enhancement

    Мне очень нравятся выпадающие меню из Bootstrap. Благодаря простой и понятной семантике их легко и приятно использовать при верстке.

    Но для полного счастья мне не хватало некоторой функциональности.


    1. radio и checkbox


    В сети существует великое множество плагинов для стилизации select и select multiple, но мне хотелось что-то простое и универсальное, и раз уж я использую «Bootsrap Dropdown Menus» в своем проекте, то почему бы с минимальными усилиями не заставить их выполнять эту задачу. Что и было сделано.

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


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

    3. bullet


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





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

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

    UPD Добавлено закрытие меню при щелчке по радио-кнопке… Добавлена возможность оставлять меню открытым, для этого нужно добавить класс .noclose к dropdown-menu (см. демо).

    Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

    Следует ли закрывать меню при выборе радио кнопки?

    • 47,9%Да295
    • 13,5%Нет83
    • 38,6%Сделать опцию238

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 14

      0
      Bullet в Opera не очень выглядит, и по-моему лучше сразу после выбора закрывать, если можно выбрать только один вариант.
        0
        Да уж, в опере косячит. Стандартный тоже. Буду искать решение.
        Что касается закрывания при радио, будем считать все ЗА и ПРОТИВ. Я пока сам не определился.
          +2
          Оперы скоро как таковой уже не будет, так что можно особо не напрягаться с поисками.

          (точнее будет конечно, но на вебките)
            +1
            Всё равно не приятно.
        +1
        Спасибо, хорошая работа!
          0
          Отлично! Забрал в работу… есть ли возможность реализовать подобную кнопку, но с <select> очень удобно было бы, проверять на каком id стоит галка не очень удобно бывает в некоторых случаях, а с <select> задача упрощается. И если есть возможность расписать какими методами можно вызвать с помощью js, я писал реализацию заполнения бланка при получении фокуса удобно разворачиваешь меню и человек уже выбирает.
            0
            … есть ли возможность реализовать подобную кнопку, но с <select> очень удобно было бы...

            Нет, это из другой оперы, разбирать select, взаимодействовать с ним — для этого нужно много javascript. У меня стояла другая задача. Существует великое множество библиотек для стилизации select. Например под bootstrap davidstutz.github.com/bootstrap-multiselect/

            И если есть возможность расписать какими методами можно вызвать с помощью js

            $('menuSelector').dropdown('toggle') — если я вас правильно понял.
              0
              Вот еще хороший бутстрап-селект, сам использую: gregfranko.com/jquery.selectBoxIt.js/
              0
              >> Иногда требуется расположить меню выше кнопки или по центру.

              На мой взгляд, девелопер не должен указывать где именно должно отображаться подменю. Это должно определяться автоматически самим компонентом меню в зависимости от размера экрана, положения скроллбаров и т.д. Иначе есть риск, что подменю отобразиться за пределами экрана. Если кнопка оказалась в верхней части страницы, то подменю должно выпадать вниз. Если кнопка почти внизу, то подменю должно автоматом открываться вверх.

                0
                Вы абсолютно правы. И это была подготовка к следующему шагу. Автоматическое позиционирование у меня было запланировано.
                0
                Напишите ребятам из Yiibooster пускай включат
                  0
                  С управлением клавиатурой все совсем плохо :(
                    0
                    У меня тоже поначалу было такое ощущение. Но дело в том что стандартно по радио навигация осуществляется стрелками, а по чекбоксам табом. Я поковырял этот момент и оставил до лучших времен, пока полностью не определюсь с поведением. В оригинале реализовано только поведения открытия меню если фокус на кнопке. В общем как бы то не было — эта тема у меня в todo.

                    Но вот сейчас, после добавлении закрытия меню с радио кнопками появился косяк, который не дает переключать опции — поправлю.
                    0
                    спасибо, то что нужно

                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                    Самое читаемое