«Нестандартный SELECT» или «Изменение внешнего вида и оформления SELECT»

« Предыдущая запись
 
  Следующая запись »
 

Все прекрасно знают, что изменить оформление SELECT'ов в форме это сплошной геморрой. Ни один раз сталкивался с тем, что у сайта с симпатичным дизайном установлены уродливые SELECT'ы, полностью выбивающиеся из того самого дизайна. И это не говоря о том, что в различных браузерах они выглядят по-разному.

Стили CSS довольно скудно позволяют настраивать внешний вид SELECT'ов: им можно задать цвет бэкграунда, но при этом нельзя в качестве бэкграунда задать картинку. О чём думали, когда это делали?

Изменить оформление злосчастного выкидного списка можно и помогает в этом нам jQuery и другие подобные библиотеки. Плагины для этих библиотек подменяют стандартный селект на выкидной список, сделанный из классических тегов <div>, <p>, <ul> и так далее, а с ними CSS нам позволяет работать на все 100%.

Тем не менее не всё так гладко, как хотелось бы. Очень много рыская в интернете в поисках подобных скриптов, я натыкался на различные вариации, обладающие различными недостатками, из-за чего проблему замены SELECT'ов я считаю довольно актуальной. Я не буду приводить всё, что я нашёл, остановлюсь на нескольких.

Изменённые SELECT'ы без полосы прокрутки

select «Нестандартный SELECT» или «Изменение внешнего вида и оформления SELECT»

Это наиболее распространённые селекты, недостаток которых указан в названии. Зачастую они прекрасно работают, ничего более и не надо, однако если список превышает 15-20 элементов, то страница растягивается очень далеко, а у селекта нет никаких полос прокрутки. Проблема? При больших списках не просто проблема, а катастрофа.

К примеру, в ссылках чуть ниже показаны пару таких плагинов.

 

SELECT'ы, заточенные под старинные версии библиотек

Оставляю пункт без комментариев и примеров, так как кому нужны примеры для jQuery 1.0.1 и подобных.

Адекватные оформления SELECT'ов

cusel «Нестандартный SELECT» или «Изменение внешнего вида и оформления SELECT»

Самый адекватный скрипт, представленный по ссылкам с примерами чуть ниже, оказался находкой. Всё хорошо, всё красиво, есть даже очень приятный плюс, заключающийся в том, что есть возможность автозаполнения — прописываешь название (как в input'е) и он тебе выберет и покажет доступные варианты.

Однако и здесь также нашлись НО. Самое главное из них заключается в том, что при наличии нескольких селектов на странице (а может даже и одном, но большом, не проверял) оформление сглюкивает из-за медленного рендеринга страницы. У меня часто пропадали полосы прокрутки в селекте.

Тем не менее, это один из лучших, найденных мною, плагинов по изменению оформления SELECT'ов. И, что самое приятное, он постоянно дорабатывается. К концу этого месяца обещали выпустить новую версию, в которой как раз таки должна быть решена проблема рендеринга.

 

Напоследок

Напоследок хочется сказать, что не было найдено ни одного примера оформленных зависимых селектов — тех, в которых выбираешь в первом селекте одно, в зависимости от этого подставляются значения во втором селекте и так далее. Хотя такой пример можно будет сделать. Полагаю, если представленный чуть выше плагин будет обновлён и будет обезбаган, то взяв его за основу я, наверное, сделаю такие списки. Но это как-нибудь потом.

 

[UPD] Пока писал пост, плагин с сайта xiper.net взяли и обновили, буквально вчера, уже успели выявить несколько недочётов. У него теперь есть своё название - cuSel. Потестить плагин ещё не успел, но, думается, нововведения придутся по вкусу. Ссылки на плагин я чуть выше изменил - под кнопкой "Пример 1" пример необновлённого плагина, а под "Пример 2" - пример с обновлённым плагином.

, ,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 11, средний: 3.45 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 13 на запись

"«Нестандартный SELECT» или «Изменение внешнего вида и оформления SELECT»"

  1. Спасибо за статью! Сам пару раз сталкивался с тем, что не найти нормального скрипта для изменения селектов. Прямо беда какая-то.

  2. Пожалуйста! Сам замучился, пока нашёл то, что нормально работает.

  3. Дмитрий
    17/09/2010 at 18:02 Постоянная ссылка Цитировать

    Да что Вы трындите, нормально работает. Нихрена нормально не работает. Ни первый пример ни второй.

    Onchange для селекта не обрабатывают. Вернее не все. С onchange=”document.getElementById(‘code’).innerHTML=this.options[this.selectedIndex].value;” так и не удолочь подружить ни один из этих скриптов.

  4. А как он работает с пхп? Получение value через посты и геты пашет?

  5. Естесственно. Иначе бы нафиг оно надо было=)
    Помню только в старой версии скрипта были проблемы, но они давно уже исправлены, так что можно смело использовать. К тому же авторы уже сделали скрипт с изменением оформления мультиселектового списка, можно найти на их сайте

  6. Сергей
    23/08/2011 at 19:36 Постоянная ссылка Цитировать

    Сделал нестандартный селект на jquery. Можно скачать одним архивом.
    divhack.com/node/15
    корректно работает в ie7, ie8, chrome, safari, firefox, opera.
    Отправка данных на сервер осуществляется через скрытый через display:none стандартный селект.

  7. а полоса прокрутки у него при куче вариантов появляется?

  8. Почитайте еще один скрипт verstkawebsaita.ru/masterskaya-verstalshchika/veb-formy/select-selekty/nestandartnye-select-selekty-form-na-jquery
    работает в ie6

  9. Allexandriya
    11/02/2013 at 14:57 Постоянная ссылка Цитировать

    Просветите, плиз.
    В примере №1 есть реализация поиска значения (автозаполнение), но во втором примере (апгрейде) такой фишки нет? Или я что-то не так делаю, не туда смотрю и т.д.?

    Мне нужен как раз селект с возможностью автозаполнения (поиском доступных вариантов).. подскажите, если знаете подобные скрипты.

    Заранее спасибо

  10. Почитайте еще один скрипт verstkawebsaita.ru/masterskaya-verstalshchika/veb-formy/select-selekty/nestandartnye-select-selekty-form-na-jquery
    работает в ie6

    битая ссылка была, а это не битая, всегда его использу, никаких проблемм
    verstkawebsaita.ru/ms/veb-formy/selects/nestandartnye-select-selekty-form-na-jquery

  11. Александр Шуйский
    12/02/2013 at 10:58 Постоянная ссылка Цитировать

    Allexandriya, jQuery Combobox и jQuery Autocomplete Plugin посмотрите. Был ещё один неплохой, но сейчас ссылку не могу найти ( Пооперируйте в яндексе с сочетанием Autocomplete и jQuery.

  12. Алексей
    05/02/2014 at 12:10 Постоянная ссылка Цитировать

    По моим наблюдениям, лучше не использовать колхоз (закрывать стандартную стрелку SELECT и вешать свое изображение), некоторые браузеры кашу выдадут, плагины эти хз кем написаны, может он криворук еще тот;) ИМХО единственное норм решение на джиквери, скрываешь стандартный селект, предварительно поставив на option value, рядом вешаешь простой список, которому придаешь нужный вид и проставляешь каждому li такой же value как и в option-ах, вешаешь клик или хувер на ul (чтобы открыть список), на каждый li вешаешь обработчик клика. Решение подходит для всех браузеров начиная с IE 6. Пользуйтесь на здоровье;)

  13. Александр Шуйский
    05/02/2014 at 12:53 Постоянная ссылка Цитировать

    По факту да, сейчас все адекватные скрипты именно скрывают обычный селект и заменяют его теми же списками ul, стилизуя их как угодно. Минус основных плагинов в том, что при наличии огромных списков они не имеют скролла, который по сути также нужно создавать плагинами для нормальной стилизации.
    Уже давно использую cuSel, вроде как единственный адекватный и нормальный плагин, который может всё, что нужно =)

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии