![jQuery Form Styler — плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)](https://dimox.name/wp-content/themes/dimox.name/cache/d0/6a66efe39766dd0_150x100.png)
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью jQuery и CSS. В этот раз это плагин ...
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Как и обещал ранее, делюсь своим очередным jQuery-скриптом в виде плагина. Он предназначен для свободного оформления ...
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, ...
Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью ...
Комментарии (2 614)
А как же третье «неопределённое состояние флажка«?
Впервые об этом узнаю. Не вижу смысла это реализовывать, т.к. в HTML этого атрибута нет.
А как же дерево флажков, в котором потомки зависят от родителей? Ведь удобно же для той же админки.
А опция для задания текста по умолчанию для select?
Зачем, если он прописывается в option?
Зачем в html добавлять лишний option? А потом еще и проверять на стороне сервера?
Интересно, а как еще можно указать текст по умолчанию, если нужно вывести стандартный селект без JavaScript?
Отлично Дима!
Очень рад, что ты нашёл время объединить плагины в один. Я даже уже знаю, где это всё применить, как раз проект на подходе к вёрстке классный. Потом покажу обязательно, но это не скоро будет, возможно в следующем году уже.
Лукавишь)))) или base64 не считается картинкой ?))
Я не считаю, поскольку файл с картинкой фактически отсутствует,т. е. нет дополнительных запросов к серверу.
Логично)
Завтра проверю на мобильнике, сегодня уже сил нет, пойду спать.
Спасибо ещё раз за плагин. очень классно код выглядит!
Пожалуйста!
Это нестандартное для веба поведение, которое осуществляется только, а js, дуvаю не составит труда дописать и плагин и реализовать это самостоятельно.
в 90% случаев первый пустой option присутствует изначально, при генерации выпадающего списка движком. Ну и как бы это является предсказуемым и логичным поведением. Потому что если человек что-то выбрал, а потом хочет отменить выбор — у него должна быть такая возможность.
А есть ли возможность к определенным select использовать отдельно оформление?
Конечно. Например:
Упс… что то не сообразил, спасибо! И ещё вопросик, можно ли ваш плагин использовать в коммерческих проектах?
Можно при сохранении копирайтов.
Спасибо! Успехов в разработке!
А обычные input для ввода текста в этом же стиле как сделать?
Текстовые инпуты и без плагинов нормально стилизуются.
Чтобы дополнительные стили не прописывать, что надо добавить чтобы в том же стиле всё стало? Пример плиз дайте :)
Вот пример — http://jsfiddle.net/Dimox/3vjSd/
Интересно, а зачем такая конструкция:
не правильнее ли было бы так:
…
это валидно по крайней мере и с
имеет больше прав на существование
поправка. не правильнее ли было бы так:
Я сделал так для поддержки старых версий IE. IE7 и ниже не понимают свойство
display: inline-blockдля блочных элементов, поэтому, чтобы не писать для него костылей, я поставил span вместо div.А валидация здесь не важна, т.к. это JavaScript.
с этой стороны конечно верно, но некрасиво
однако если выбирать красоту кода и поддержку, то я с вами соглашусь, лучше див в спане :)
Подскажи пожалуйста как задать ширину селекта в пикселях? Если их несколько на странице и каждому нужна разная ширина
Смотрите комментарий № 14.
Возникла проблема с функцией click по чекбоксу, укажите куда копать.
стандартно click не реагирует на стилизированные чекбоксы, приходться изощрятся click на span. checkbox, но тогда почему-то не срабатывает .live …
Фактически клика на чекбоксе не происходит, т.к. он скрыт, поэтому вместо
clickиспользуйтеchange.большое спасибо, помогло)
Не могу словить клик по радио кнопке, в стандартном работает, а с плагином нет:
как я это делаю:
$('input[name="text"]').click (function () {
var radio = $('input[name="text"]:checked').val ();
console. log (radio);
});
Спасайте :) оч. нуна
Это момент, к сожалению, оказался не рабочим. Буду искать выход из ситуации.
Можно ли росчитывать на скорейшее решение?, или искать другой плагин, мне нужно сдать заказчику красивости.
Уже в процессе. Надеюсь, что сегодня выложу обновление.
Готово. Скачайте новую версию. Только используйте
changeвместоclick.Для селектов не хватает перемнной, задающей z-index, а то получается селекты показываются поверх попап окошек, отправил правки на git github.com/Dimox/formStyler/pull/1
Да, согласен, добавлю опцию. Твои правки не подходят, там потребуются изменения в нескольких местах, да и у тебя ошибка в коде.
Но, по большому счету, можно просто поставить больший z-index у попапов.
Подправил, проверил, извини, поторопился.
github.com/Dimox/formStyler/pull/2
Dimox дорогой, скажи, а что делать если у меня на страничке уже установлен другой скрипт который обращается к JQuery и идет конфликт? весь вечер рылся в нете, но так и не вышло у меня устранить конфликт. я так понимаю суть в том что твой скрипт переменную $ использует по своему назначению, а что делать с остальными которым переменная $ тоже нужна?
Вот глянь вот так должен работать скрипт сайта seregatt.ru/index.html,
а вот так он работает с твоим скриптом seregatt.ru/index1.html
то есть когда я убираю
тогда работает мой скрипт, а твой нет… есть ли решение этой проблемы???
jQuery у тебя подключен дважды: версии 1.6.1и 1.8.2. Нужно убрать подключение 1.6.1, возможно, в этом и причина.
разумеется я попробовал и так, но не выходит. конфликт все равно идет.
Консоль ошибок указывает на jQuery1.6.1. Других причин я не вижу.
ну вот я удалил 1,6,1 теперь ваш скрипт работает, а то что работало на 1.6.1 не работает.
seregatt.ru/index3.html
Страница недоступна.
сори, обновил страничку. щас не работает сам скрипт портфолио, а ваш скрипт работает… есть ли решение? погуглив нашел jQuery noConflic, но всеравно ниче не получается
Попробуйте еще сделать следующее. В самом начале файла script. js заменить:
на:
А в самом конце заменить:
на:
попробовал. увы не помогло =(
Не решилась проблема? Просто в похожей ситуации оказался…
Нет, буду сам разбираться, но после нового года!
Юриц
А у меня что-то вообще со стилями все поехало, не могу понять что такое? теперь и стиль и радио кнопки отдельно друг от друга
Прошу прощение, просто паника, удалось подправить. моя вина. Спасибо за отличный плагин и оперативную помощь
Дмитрий, здравствуйте. В Вашем дэмо примере не работает переход стрелками вверх на радио кнопках в браузере Chrome.
А именно с радио кнопки обернутую в label вместе с текстом, на кнопку привязанную к label.
Я знаю об этом. То же самое и в Firefox. Пытался решить эту проблему, но не смог. При этом в Opera и Internet Explorer такой проблемы нет.
Поэтому непонятно, то ли я что-то неправильно сделал (но по логике у меня все правильно), то ли это баг браузеров Chrome и Firefox.
Вот тоже пытаюсь, но пока без результатно, но как говорится нет безвыходных ситуаций, будем выявлять способ устранения.
Очень понравился плагин, но столкнулся с некоторыми проблемами…
Как изменить размер отдельного select
Как включить отображение select multiple, что бы он не использовался formstyler
Все элементарно.
Смотрите здесь.
Добавьте к стилизуемым селектам отдельный класс, и укажите их в код из 3-го пункта.
Дмитрий, здравствуйте. Ещё всплыла одна проблема с radio. Если на странице есть несколько форм с radio кнопками, то если выбрать в одной из форм radio кнопку то с остальных снимаются кнопки.
Уникальный ли у них атрибут
nameв разных формах?Всё разобрался, добавил к аттрибуту name номер формы и теперь в каждой форме он уникальный и всё работает как надо.
Вот, так и нужно было. Работа плагина завязана именно на уникальности этого атрибута.
Можно ли данный плагин исползовать если на странице имеется несколько селектов с разной заданной шириной?
Если да, то как реализовать даный момент?
https://dimox.name/jquery-form-styler/?cp=1#comment-15 525
Спасибо, видимо пропустил комментарии. Успехов Вам.
Подскажите. Мне необходимо сделать связанные select’ы (что бы при выборе в одном, изменялись значения в другом). В java не силен. Нашел готовый скрипт, который изменяет эти значения в select’ах — (немного доработал для себя) работает, но при использовании Вашего скрипта маркированный список остается старым. (то есть значения в Select’ах меняются значения, а в ul li нет).
Это как-то можно реализовать?
Пример.
В данном примере я сделал так, что, если в первом селекте выбрать «Пункт 3», то во втором выбирается «Пункт 5».
Не совсем это имел ввиду. Как изменять наполнение второго select при изменении первого?
Например:
Первый: «Автомобили, Посуда, Другое».
Выбираем «Автомобили» — во втором список выпадающий состоит из: «Ford, Audi, BMW».
А если выбрать в первом «Посуда», то список во втором изменится на: «Вилки, Ложки, Тарелки».
Как вариант сделать 3 селекта (исходя из вашего примера). 2-й и 3-й по умолчанию скрыть. И при изменении 1-го селекта показывать соответственно 2-й или 3-й.
В своем комментарии я написал что это просто пример.
Да при условии что Select’ов 2−3 и в первом всего 3 значения, вариант более чем хороший, но что делать если select’ов 5. При этом в первом 12 значений и в зависимости от выбора в нем изменяются списки в остальных 4-ех. Тогда таких скрытых селектов потребуется сделать целую кучу. А если учесть, что исходя из выбранных значений в селектах должны производится рассчеты, получается совсем сложно.
Мне кажется тут нужно смотреть реально работающий пример.
Но по сути на каждый выбор одного из селектов вам нужно запустить триггер
ПафНутиЙ, Dimox: Спасибо за помощь. Теперь все нормально работает. Не работал refresh из-за того что у меня в форме не было id у select’ов. Был только name.
P. S. : Dimox спасибо Вам за чудо скрипт.
Пожалуйста! Рад, что разобрались.
Пожалуйста, но скрипт можно повесить на любой атрибут,в т. ч. name, просто по id выборка самая быстрая, меньше грузит браузер) правда это имеет смысл только при больших объёмах обрабатываемого контента.
В таком случае вижу решение только в использовании AJAX.
Планируете ли Вы сделать стили под прокрутку?
Если вы про оформление скроллбара, то есть мысли однажды попробовать это сделать.