jQuery CoreUISelect — плагин для стилизации селекта

    На Хабре уже проскальзывали обзоры плагинов для стилизации селекта (раз и два)

    Возможно буду заброшен помидорами за изобретение очередного велосипеда, но все текущие реализации меня не устраивали. Да, отличный плагин chosen, но в нем чрезмерное количество ненужного мне функционала. ikSelect, да, почти то что надо, но мне не понравилась генерируемая разметка.



    Итак, задача — сделать плагин с блэкджеком и ш… для стилизации селекта, который по максимуму повторяет поведение стандартного. А это навигация с клавиатуры, автоподгонка ширины дропдауна, поддержка optgroup, автокомплит и самое главное полная кастомизация, включая скроллбар*.

    * Для поддержки кастомного скролла нужен плагин jScrollPane

    Спустя несколько дней, получился вполне работоспособный плагин, гордо названный jQueryCoreUISelect

    Есть API, совсем небольшой состоящий из 5 коллбеков:

    $('.b-core-ui-select__select').сoreUISelect({
        onInit : addCoreUISelectListener,
        onOpen : addCoreUISelectListener,
        onClose : addCoreUISelectListener,
        onChange : addCoreUISelectListener,
        onDestroy : addCoreUISelectListener
    });
     
    function addCoreUISelectListener(select, event){
        console.log(el, event);
    }  
    


    И пара внешних методов (для полноценной жизни вполне хватает):

    $('.b-core-ui-select__select').сoreUISelect('update');
    $('.b-core-ui-select__select').сoreUISelect('destroy');
    


    Под iPhone, iPad, Android включается адаптация, т.е. внешний вид выпадающего dropdown уже зависит от системы. В Opera Mini плагин выключается полностью.


    Под iPad


    Под iPhone

    Демо и исходники см. ниже, форкаем, ругаем, предлагаем.
    Спасибо за внимание!

    Ссылка на демо
    Ссылка на GitHub
    Share post

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 61

      +5
      Симпатично так! Молодцы, что на гитхабе!
        +3
        Может быть поменять стилизацию селекта при фокусе? Сейчас он выглядит «вдавленным», что более подходит для active, да и когда вы выбрали элемент, фокус остаётся на селекте и он выглядит «вдавленный». Например, сменить стилизацию фокуса на дефолтный вид + 5-10% засветка, а текущий вид фокуса поставить на active. Как-то так. В остальном симпатично на первый взгляд.
          +1
          Дело вкуса конечно :) Но над дизайном еще подумаю
          +1
          На демке, во втором примере «Optiongroup support» если выбирать страны из категории Б, то начинаются чудеса. Последние 2 страны не выставляют значения, а Болгария выбирает последнюю страну. После тестирования, начали глючить и страны группы А.
          Firefox 14.0.1
          Safari 5.1
          Window XP sp3
            +1
            Спасибо, сейчас поправлю. Поддержка Optiongroup только вчера появилась :)
              +1
              Было бы круто :)
              А под какой лицензией Вы плагин выпустили?
              +2
              Bug fixed
            +1
            А вот если ширина и высота оригинального селекта фиксированная, то стилизированный селект эти размеры подтянет? Или нужно будет дублировать и для него?
              +2
              Ширину подтянет. Высота зависит от CSS.
              Можно с помощью CSS и ширину зафикисровать с помощью !important
              +1
              В хроме на андроиде не работает. Тольо стиль меняется при нажатии.
                0
                в обычном браузере тоже не работает. по крайней мере у меня на планшете с ics
                +1
                А если будет <option value="bla-bla" disabled="disabled">bla</option>?
                  +1
                  Он выключится как в стандартном
                    0
                    То есть у него изменится стиль и его нельзя будет выбрать? Это хорошо, потому что очень часто забывают про этот момент.
                      +2
                      Да, это предусмотрено
                        +1
                        Шикарно, спасибо!
                  +2
                  Не нашел указания браузерной совместимости. Как с кроссбраузерностью-то?
                    +1
                    Я тестировал IE7+
                    Теоретически будет работать и в IE6, но больше багов будет именно с CSS

                    Во всех последних Chrome, Firefox, Safari и Opera все работает
                    –1
                    В ие клавиатура работает неправильно. Почему b-core-ui-select блочный? Селекты у нас блочные что-ли?

                    Плагин должен работать таким образом, чтобы после его подключения на произвольный сайт ничего не разваливалось.
                      +1
                      А что не так с клавиатурой?
                      b-core-ui-select может быть и inline при желании. Все зависит от фантазии и от конкретной задаче
                        0
                        По табу переход срабатывает, по курсору выбор не происходит.

                        b-core-ui-select должен быть инлайн-блоком по умолчанию, здесь вообще нечего обсуждать.
                      –6
                      Очередной 1001 плагин для стилизации селектов. Ну и еще раз не стилизуйте селекты в телефонах, пожалейте юзера, пусть лучше дизайнер головой поработает.
                        +1
                        Согласен, под мобильный можно плагин просто не включать
                          –4
                          Ну очередная копия плагина. ничем не выделяется, зачем? Зачем — это конечно ваше дело, вам удобней- ради бога, прост оне монимаю что особенного в ней чтобы на хабр постить
                        –1
                        Мне лично не нравится идея первым ставить в дропдаунах United States.
                          +3
                          как всегда в таких кастомных скроллерах неудобно работать с колесиком мышки — если доезжаешь до конца списка, то начинает прокручиваться основной скроллер окна — дико неудобно.
                            0
                            Насколько я помню в стандартном select такое поведение тоже наблюдается.
                            0
                            спасибо, попробую и ваш «велосипед». до этого использовал Chosen, но он мне показался слегка перегруженым
                              0
                              А где поиск, multiple?
                              И вот как выглядит в мобильной опере:
                                0
                                  +1
                                  Я бы для Opera Mobile кастомные селекты не использовал бы :)
                                  0
                                  Специально нет. Попробуйте Chosen
                                  0
                                  Как автору ikSelect, интересно что не так с разметкой? По сути все так же, разве что optgroup выношу в отдельные ul>li, насколько я помню, что вроде бы даже логичнее )

                                  Из багов первое что проверил это стрелки в вебките и они неправильно работают. img.i10k.ru/3jc
                                  Всплывает нативный дропдаун, причем почему-то слишком широкий. Схожая проблема и в плагине «Selectik», правда там этот дропдаун так сильно не растягивает )

                                  Подробнее тестить лень, но в целом все выглядит хорошо. )
                                    +1
                                    Вы тестили под маком? :) Да, из-за его периодического отсутствия не успеваю допилить.

                                    А с разметкой мне не понравилось то, что стандартный select оборачивается в контейнер.
                                    Бывает проблем с jquery validate, когда label.error генерится сразу после select. В вашем случае ошибки просто не видно. Понятно, что можно изменить вывод label.error, но хотелось бы из коробки :)
                                      0
                                      Ага, под маком. Даже не подумал, что это может зависеть от ОС.

                                      Про разметку можно было просто отписать в «issues» на «github». Вполне все логично, придумал бы что-нибудь. Тем более у меня вроде бы ничего не завязано на положении оригинального селекта, так что по идее его можно легко перетащить в нужное место. )
                                    +1
                                    Стилизация — (от французского style — стиль) намеренная имитация формальных признаков и образной системы того или иного стиля в новом, необычном для него художественном контексте.

                                    slovari.yandex.ru/стилизация/значение/

                                    Если вы используете CSS (стили), то вы не «стилизуете», вы оформляете.
                                      0
                                      Я честно ждал такого комментария :)
                                      0
                                      открываю список, тяну за бегунок скролла вниз до середины списка (до буквы М например, неважно), отпускаю — фокус перекидывается обратно в начало списка. Т.е. таким образом вообще невозможно выбрать нужный пункт
                                      ФФ 14.0.1, вин7
                                        0
                                        Я посмотрел что делает обычный select. Ровно тоже самое :)
                                          0
                                          Вот тут в окошке комментирования есть селект Source — он так не делает.
                                          http://www.mathworks.com/company/worldwide/ и тут тоже.
                                          И вообще ни разу не видел таокго поведения.
                                            0
                                            Странно, никак не могу воспроизвести баг. Также тяну, до середины, отпускаю, кликаю в сторону, select закрывается
                                              0
                                              вот снял видео, заодно и в хроме проверил — то же самое
                                                +1
                                                Спасибо за видео! Но я так баг и не смог воспроизвести. Честно повторял как на видео :(
                                                  0
                                                  попросил коллегу посомтреть — у него все нормально. А у меня еще и на Опере такое же поведение.
                                                    0
                                                    ну и в ИЕ заодно. Это рабочий компьютер, дома возможно все ок. Интересно, с чем это может быть связано?
                                                      0
                                                      Может быть проблема с мышкой? :) Или скроллом?
                                                        +1
                                                        вот, домой пришел. В 14 ФФ та же беда
                                                          0
                                                          На рабочем компе все было нормально, а вот на домашнем тоже появился баг (ФФ 13.0.1, win7 x64).
                                                            0
                                                            обновил до 14.0.1, баг изчез
                                          0
                                          C jScrollPane последних версий беды у нас начались. То на MACах баги, то еще что, пришлось откапывать велосипеды столетней давности, которыми не пользовался после первого знакомства с jScrollPane.
                                            +1
                                            Я юзал вторую версию, проблем не наблюдал. Хотя использую довольно часто
                                            0
                                            Спасибо! Хороший компонент.
                                              0
                                              А вариант с поиском не планируете добавить?
                                                0
                                                Есть планы только с мультисеклектом. А для поиска отлично подходит chosen
                                                0
                                                а как быть, если изначальный селект disabled?
                                                нужно при клике снять с него disabled.
                                                $('#myselect').removeAttr('disabled') не работает
                                                $('.b-core-ui-select__select').removeClass('disabled'); тоже
                                                  0
                                                  Вызываете метод refresh
                                                    0
                                                    что-то вроде
                                                    $('.b-core-ui-select__select').removeClass('disabled');
                                                    $('.b-core-ui-select__select').coreUISelect('refresh');
                                                    ?
                                                      0
                                                      Как то так:
                                                      $('.b-core-ui-select__select').removeAttr('disabled');
                                                      $('.b-core-ui-select__select').coreUISelect('update');

                                                  0
                                                  Выпадающий список (b-core-ui-select__dropdown) считает свое абсолютное от body.

                                                  Как решаются проблемы с position:relative | overflow:hidden у родителя(ей) в котором расположен список?

                                                  Что-то мне подсказывает (поправьте меня если это не так) что решение тут лежит в доп. контейнерах в генерируемом html плагином.

                                                  Спасибо
                                                    0
                                                    начиная с jquery 1.9 не работает, т.к. свойство browser там убрано

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