Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке - это верстка html-форм. К сожалению, не существует единого стандарта отображения ...
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация ...
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью jQuery и CSS. В этот раз это плагин ...
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Как и обещал ранее, делюсь своим очередным jQuery-скриптом в виде плагина. Он предназначен для свободного оформления ...
Глядя на днях на циферки на счетчике ли.ру, в моей голове неожиданно зародилась весьма дурная идея — мне захотелось создать цифровые часы, которые бы в точности повторяли те самые циферки с того самого счетчика. Эта идея никак не давала мне покоя, ...
Комментарии (105)
Спасибо за скрипт. Пока вроде багов не заметил. Буду использовать.
Получилось аккуратненько! Здорово.
Opera Mobile 10.00 на HTC Touch HD — все отлично работает, но немного тормозит. Проверил все селекты на странице с примерами. Спасибо за вашу работу!
То, что работает — хорошо. А торможение как проявляется?
iOS 5.1 тест прошел, работает отлично. Только жаль, что открытый список не убирается при нажатии на свободное пространство экрана, но это мелочи и, возможно, не от вас зависит:)
Да, от меня это не зависит.
Если на компьютере кликать мышью в свободное пространство, тогда список убирается. Видимо, такое поведение работает только для мыши и не распространяется на сенсорные экраны.
Возможно, что не работает именно на iOS, потому что для выпадающих списков есть отдельный ролик в ОС, который, кстати, удобен. jQ, же, видимо, блочит этот ролик:)
А почему бы не взять структуру списка ul>li>a, тогда бы и hover в ИЕ6 заработал? И отчего в ИЕ6 вместо стрелок полоски?
IE6 сегодня уже так важен. Но если принципиально, то можно для этого использовать специальное решение.
Оттого, что IE6 не поддерживает свойство
border-color: transparent.Для ИЕ бордер можно сделать розовым, например, и розовый через фильтр сделать прозрачным (http://kobzarev.com/browser/emulation-border-color-transparent-in-internet-explorer-6.html)
Я это пробовал, но у меня почему-то не работает.
Выставите hasLayout = true для элемента с фильтром
hasLayout уже был изначально.
Я в таких вопросах обычно прибегаю к философии своего казино с блекджеком, оно и компактнее и точно знаешь слабые места в коде.
делал что-то похожее… давно еще prootime.ru/select-css … надо бы генератор или список разных типов оформлений
Очень часто необходимо добавлять в список значения через AJAX. Поэтому нужен метод для обновления селекта. А ширина селекта автоматически задается? Я имею ввиду, если значения в селекте будут содержать много текста.
По поводу ширины — смотрите примеры. По поводу AJAX — я не знаю, как это сделать.
Просто функция или метод, который будет перерисовывать оригинальный селект.Т. е. AJAX-ом я добавляю пункты в оригинальный селект. Затем вызываю кастомную функцию, которая собирает новые элементы списка и перерисовует их. Как-то так.
Буду ждать решения с radio))
Вопрос такой. Есть блог на Wordpress. Стандартными средствами в сайдбар добавлены выпадающие списки тегов и рубрик. Так вот, как подключить к этим спискам сабж? Ну, то есть, где нужно добавить class для селектора?
Спасибо за ответ и за скрипт. Реально — очень красиво
В скрипте перед этой строкой:
добавьте такую:
не помогло, к сожалению
Я проверял на тестовой странице, у меня сработало.
Если не сложно, посмотрите на моём блоге *мойник*.com, может увидите в чем ошибка. Я смотрю firebug’ом — класс не добавился. Да плюс jQuery не захотел работать с плагином jQuery Lightbox, который пришлось по этой причине отключить.
В общем, не везет мне. А так хочется…
Ох, и у меня заработало. Хоть и не делал ничего. Спасибо. Всё очень круто.
Отлично. Смотрится очень привлекательно =)
Да, огромное спасибо. Ща немного подправлю CSS, чтобы на маленьких экранах за пределы сайдбара не вылетало и всё. Отличная работа. Еще раз спасибо
Классный скрипт. Все просто и ясно. Спасибо!
Хороший плагин! Вопрос! :) Как сделать так, чтобы первый пункт (он же --Выберите--) не был кликабельным и его нельзя было бы выбрать, но при этом он был бы в форме как подсказка? Пробовал с disable — в итоге этот пункт не кликабельный и его видно при открытии формы, но он исключается формы, когда она находится в обычном состоянии (на открыта).
Кроме использования disabled никак не сделать.
После ряда экспериментов получилось то, что нужно: в первый элемент select’а добавляем disabled="disabled" selected="selected" label="Текст элемента", в css. selectbox li.disabled добавляем display: none; Так пункт виден в названии selecta и при открытии формы остается только в самом селекте и пропадает в выпадающем списке! Может быть кому-то пригодится ^^ cheers!!!
Я, кстати, с помощью вашего скрипта переделал select настолько, что теперь это не селект, а dropdown menu c несколькими колонками :)
А ссылку на примерчик?
искал легкий скрипт на замену Custom form elements (by Ryan Fait), но тут встретится с той же проблемой: если ширина селекта не задана, а пункты — разной длины, то пр ивыбора разных пунтктов ширина селекта «скачет». А хотелось бы, чтобы было как с реальным селектом — у которого ширина при этом не скачет. В данном скрипте так сделано специально?
допилил под свои нужды путем:
Итого: jsfiddle.net/4yd9Q/
то, что нужно. спасибо!
upd.
скрипт от Ryan Fait тоже допилил, как-то так: span[a].style.width=inputs[a].offsetWidth+"px";
но уж очень на JS тяжело что-то менять для непосвященных в него:(
а почему не сделать плагином? єто же пара строчек кода. а можно сделать настройки… ну и не привязьіваться к класу селекта.
Если бы были какие-то настройки, то имело бы смысл. А так не вижу никакой разницы.
Кому надо, тот и сам сможет завернуть все в плагин, не нужно же тупо в лоб копировать.
Как перерисовать селектор после программного изменения элементов options?
Это как понять?
Я изменяю с помощью javascript значение атрибута text у options. Если в стандартном select он тут же перерисовывается, то в обработанном с помощью этого скрипта, остается тем, каким был в момент инициализации.
Так не понял, что за options, и что за атрибут text, но раз ничего не меняется, значит в скрипте это не предусмотрено.
select состоит из options, у каждого options есть value — это его значение и text — это текст, который соответствует этому значению в селекторе. Оба этих параметра можно менять с помощью javascript уже после загрузки страницы. Так вот новое значение text после его изменения не отображается, а остается старым. Если отключить скрипт, то значение text с помощью того же скрипта благополучно меняется и отображается браузером.
Ясно теперь. Как я говорил, в скрипте это не предусмотрено. Я не знаю, как такие вещи делать.
Я так понимаю, что нужно просто заново запустить функцию-обработчик jQuery, который перерисовал бы селектор. Он запускается один раз, когда страница загружается. Можно ли его запустить еще раз и если да, то как?
Не знаю, как это сделать.
Плагин, конечно это хорошо, но до тех пор пока не понадобиться верстать действительно что-то уникальное. По этому лучше всего делать все самому. И понимать что к чему. По этому поводу есть очень подробный и простой рецепт нестандартного селекта. Я думаю, что каждый уважающий себя мастер должен понимать причины следствия.
Все супер, а про главное то не сказали, как сделать стили для разных селектов, он же не один на странице
Имеете в виду разное оформление для разных селектов или что?