adminvps

jQuery-плагин для стилизации селектов

jQuery-плагин для стилизации select’ов

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, не существует единого ...

Комментарии (105)
  1. 1

    Спасибо за скрипт. Пока вроде багов не заметил. Буду использовать.

  2. 2

    Получилось аккуратненько! Здорово.

  3. 3

    Opera Mobile 10.00 на HTC Touch HD — все отлично работает, но немного тормозит. Проверил все селекты на странице с примерами. Спасибо за вашу работу!

  4. 5

    iOS 5.1 тест прошел, работает отлично. Только жаль, что открытый список не убирается при нажатии на свободное пространство экрана, но это мелочи и, возможно, не от вас зависит:)

    • 6

      Да, от меня это не зависит.

      Если на компьютере кликать мышью в свободное пространство, тогда список убирается. Видимо, такое поведение работает только для мыши и не распространяется на сенсорные экраны.

  5. 8

    А почему бы не взять структуру списка ul>li>a, тогда бы и hover в ИЕ6 заработал? И отчего в ИЕ6 вместо стрелок полоски?

  6. 14

    Я в таких вопросах обычно прибегаю к философии своего казино с блекджеком, оно и компактнее и точно знаешь слабые места в коде.

  7. 15

    делал что то похожее… давно еще prootime.ru/select-css … надо бы генератор или список разных типов оформлений

  8. 16

    Очень часто необходимо добавлять в список значения через AJAX. Поэтому нужен метод для обновления селекта. А ширина селекта автоматически задается? Я имею ввиду, если значения в селекте будут содержать много текста.

  9. 19

    Буду ждать решения с radio ))

  10. 20
    @

    Вопрос такой. Есть блог на WordPress. Стандартными средствами в сайдбар добавлены выпадающие списки тегов и рубрик. Так вот, как подключить к этим спискам сабж? Ну, то есть, где нужно добавить class для селектора?
    Спасибо за ответ и за скрипт. Реально — очень красиво

  11. 28
    Андрей

    Классный скрипт. Все просто и ясно. Спасибо!

  12. 29
    Max
    @

    Хороший плагин! Вопрос! :) Как сделать так, чтобы первый пункт (он же —Выберите—) не был кликабельным и его нельзя было бы выбрать, но при этом он был бы в форме как подсказка? Пробовал с disable — в итоге этот пункт не кликабельный и его видно при открытии формы, но он исключается формы, когда она находится в обычном состоянии (на открыта).

  13. 31
    Max
    @

    После ряда экспериментов получилось то, что нужно: в первый элемент select’а добавляем disabled=»disabled» selected=»selected» label=»Текст элемента», в css .selectbox li.disabled добавляем display: none; Так пункт виден в названии selecta и при открытии формы остается только в самом селекте и пропадает в выпадающем списке! Может быть кому-то пригодится ^^ cheers!!!
    Я, кстати, с помощью вашего скрипта переделал select настолько, что теперь это не селект, а dropdown menu c несколькими колонками :)

  14. 33
    vlad
    @

    искал легкий скрипт на замену Custom form elements (by Ryan Fait), но тут встретится с той же проблемой: если ширина селекта не задана, а пункты — разной длины, то пр ивыбора разных пунтктов ширина селекта «скачет». А хотелось бы, чтобы было как с реальным селектом — у которого ширина при этом не скачет. В данном скрипте так сделано специально?

  15. 34
    vlad
    @

    допилил под свои нужды путем:

    var sew = $(this).width();

    Итого: http://jsfiddle.net/4yd9Q/

    то,что нужно. спасибо!

    upd.
    скрипт от Ryan Fait тоже допилил, как-то так: span[a].style.width=inputs[a].offsetWidth+»px»;
    но уж очень на JS тяжело что-то менять для непосвященных в него:(

  16. 35
    irokez

    а почему не сделать плагином? єто же пара строчек кода. а можно сделать настройки… ну и не привязьіваться к класу селекта.

  17. 38
    Qberon
    @

    Как перерисовать селектор после программного изменения элементов options?

  18. 42
    Qberon
    @

    select состоит из options, у каждого options есть value — это его значение и text — это текст, который соответствует этому значению в селекторе. Оба этих параметра можно менять с помощью javascript уже после загрузки страницы. Так вот новое значение text после его изменения не отображается, а остается старым. Если отключить скрипт, то значение text с помощью того же скрипта благополучно меняется и отображается браузером.

  19. 46
    Константин

    Плагин, конечно это хорошо, но до тех пор пока не понадобиться верстать действительно что-то уникальное. По этому лучше всего делать все самому. И понимать что к чему. По этому поводу есть очень подробный и простой рецепт нестандартного селекта. Я думаю, что каждый уважающий себя мастер должен понимать причины следствия.

  20. 47
    Антон

    Все супер, а про главное то не сказали, как сделать стили для разных селектов, он же не один на странице