Chosen: сделай выпадающие списки более дружественными

    Плагин Chosen создан для оформления красивых и удобных выпадающих списков с помощью jQuery и Prototype. Для установки плагина достаточно просто скачать файлы и прописать одну строчку:

    $(".chzn-select").chosen()
    (версия для jQuery)

    По умолчанию в Chosen вместо длинного текстового списка предлагается поле, по нажатию на которое появляется список. Поддерживается автодополнение ввода, выбор нескольких пунктов меню, элемент optgroup и др. Выглядит вполне нативно. В общем, лучше один раз увидеть.

    Поскольку Chosen заменяет стандартный элемент HTML, то не нужно беспокоиться, как он работает с браузерами без поддержки JavaScript. Также не нужно ничего менять в бэкенде: формы сабмиттятся как обычно, изменения только в пользовательском интерфейсе.

    Некоторые форки:
    Chosen для MooTools
    Модуль Chosen для Drupal 7
    Support the author
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 57

      +10
      Однозначно в закладки. Спасибо!
        +6
        Не поймите меня не правильно, но получается что теперь на хабре деляться плагинами для jQuery вместо того чтобы писать технические статьи, или «программистов» на jqeury нынче так много что выкладывать плагины популярно?
          +1
          Тем более на мобильных устройствах этим пользоваться невозможно! Ни iPhone, ни iPad, и, думаю андроид, так как там тоже webkit, не могут листать эти списки. Короче говоря не используйте что-то просто ради того что бы использовать!
            0
            коммент ниже
              0
              Специально проверил на планшете (дроид 3.1) — все работает.
                0
                Значит это косяк iOS. В любом случае я бы такое не стал использовать не протестировав на мобильных девайсах.
                Точнее все работает, кроме ручной прокрутки.
              +2
              Но самое страшное и важное, чего не хватает в таких select плугинах — это управления с клавиатуры!
                +2
                Ну в этом плагине вообще-то есть оно, управление с клавиатуры. И работает вроде как даже лучше нативного варианта.
              +2
              В демо я вижу как и стандартных контролах один недостаток. Нет возможности очистить поле не добавляя пункт «не выбрано».
                +2
                А мне обычно не хватает возможностей input-select.
                Вот что придумалось, глядя на демо:
                  0
                  Попробуйте это:
                  в демо 3 элемент сверху

                  буду рад всякому фидбеку
                    0
                    В этом и есть суть input-select'a, но не совсем очевидно добавление нового элемента (по крайней мере для меня). Ну и мультиселект отпадает в такой реализации.

                    Если набрать что-то и не нажать Enter, вернется то что было выбрано до этого (хотя может так и задумано).
                    0
                    Реализовал демку, с кнопкой «Добавить». В jQuery версии невозможно добраться до основного класса Chosen, надо патчить либу, в Prototype версии класс лежит в window — проблем с расширением нет.
                    скрин habrastorage.org/storage1/1323aad6/a9f967f1/3c634b64/f03c19a8.jpg
                      +5
                      если нужно могу небольшой пост сделать, с исходниками
                        0
                        Пожалуйста. Лишним не будет
                          +3
                          Статья готова, карма не позволяет публиковать (
                            0
                            Благодарю всех за поддержку, еще немного осталось и смогу публиковать
                          +1
                    +7
                    Multiple Select не удобный. Нельзя открыть список и выбрать сразу несколько элементов (по Ctrl).
                      0
                      Замечание очень ценное!
                      Но это ведь не проблема. При желании не так сложно «допилить» и Ctrl, и даже Shift, если пригодится.
                      +1
                      Контрол нужный, гораздо лучше чем аналогичный Autocomplete из jQuery UI, а вот есть ли возможность в нем не весь список сразу задавать, а подгружать через JSON с сервера? Без нее смысла нет в контроле мало, а в демках нет, может кто изучил вопрос?
                        +1
                        А топик-то в блоге AJAX. Ай-нанэ.
                          +1
                          Че он делает в «AJAX» я тоже не понял, скачал исходники, ни намека на AJAX нет, хотя JSON для подгрузки вариантов экономнее был бы.
                            +3
                            Согласен, особенно со странами.

                            А вообще это прикольно, люди часто путают AJAX и jQuery: «ну сделать сворачивание, чтобы по ссылке таблица появлялась, ну на этом, как его, на аяксе! как, вы что не знаете аякса?»
                          0
                          Сначала тоже удивился почему тут Ajax не используется.
                          Но все встает на свои места* если еще раз посмотреть на назначение данного плагина — ненавязчивая замена стандартных выпадающих списков.

                          * Кроме выбранного блога конечно.
                          +3
                          «Меню»?
                          • UFO just landed and posted this here
                              0
                              Надо бы доработать чуток =)

                              image
                                0
                                Интересно, а автопоиск строки происходит адекватно, если данные на кирилице? Автор статьи или кто-нить тестировал уже этот вопрос?
                                  0
                                  Вполне адекватно.
                                  0
                                  Очень удачная реализация с токи зрения удобства интерфейса. Спасибо!
                                  • UFO just landed and posted this here
                                      –10
                                      первый полезный пост ализара, ну надо же. ПОЗДРАВЛЯЮ ВАС, АЛИЗАР! ТЕПЕРЬ И ВЫ ПРИНОСИТЕ ПОЛЬЗУ ОБЩЕСТВУ!
                                        +1
                                        Чего вы так? У Ализара есть хорошие посты, те же переводы, например.
                                          +1
                                          я не могу не отдать должное трудолюбию Ализара, поскольку представляю, сколько сил требует хороший качественный перевод, не говоря уже о поиске самих статей.
                                          но мне кажется, что эту энергию можно было бы использовать с большей пользой, а сами статьи писать чуть реже, но чуть более тщательно.
                                      • UFO just landed and posted this here
                                          0
                                          Проскакивал на хабре обзор на эту тему — кстати вот он — habrahabr.ru/company/aiken/blog/114927/
                                          По-моему этот лучший. Спасибо человеку!
                                            0
                                            Не за что =)
                                            +1
                                            Столкнулся тут недавно с плагином, который рисует красивые checkbox-ы… Что бы вы думали? Он не перерисовывает их, когда им присваивается значение checked!
                                              0
                                              что за плагин, если не секрет?
                                              0
                                              А его можно развернуть и держать в развернутом состоянии? Несколько пунктов подряд чтобы выбрать больно много кликов надо.
                                                +1
                                                Очень клевая штука. Но несколько странно использование атрибута title для текста по-умолчанию. Я бы заюзал placeholder, или если его нет у элемента select (лень проверять), то data-placeholder.
                                                  0
                                                  Отлично,
                                                  Page up / Page Down не обрабатывает в списке
                                                    +2
                                                    All modern browsers are support (Firefox, Chrome, Safari and IE9).
                                                    А что, Opera уже не modern browser?
                                                      0
                                                      Вот непонятно, что там такого используется, что Опера не поддерживает.
                                                        0
                                                        Всё вроде работает как надо. Обидно, что Оперу не считают современным браузером.
                                                      0
                                                      спасиб
                                                        0
                                                        В опере клавиши глючат слегка, а так прикольно.
                                                          0
                                                          супер, это реально красивая штука и очень удобная
                                                          • UFO just landed and posted this here
                                                              0
                                                              Отличная реализация! Единственное чего не хватает для полного счастья — различные Event'ы. Мне вот например очень нужно событие hover, чтобы при наведении курсора мышки на элемент выпадающего меню где-то рядом я мог бы отобразить подсказку по этому элементу меню.
                                                                0
                                                                А почему Вы пишете о Chosen во блоге о JavaScript, а не в специальном блоге jQuery? Только потому, что форки есть?
                                                                  0
                                                                  Ну да.
                                                                    0
                                                                    «во блоге» < — > «в специальном» ?!?
                                                                    0
                                                                    Каким образом можно заблокировать элемент на изменение, раскрашенный с помощью Chosen? Простой disabled не работает.
                                                                      0
                                                                      Обновите версию и disabled будет работать после
                                                                      $("#region_id").trigger(«liszt:updated»);
                                                                      0
                                                                      Я ждал этого класса!
                                                                      Спасибо Вам :-)

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