![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/ae/82a1275cea527ae_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)
Привет! Плагин хороший, судя по возможностям и быстроте настройки. Вопрос касается Range объекта. Плагин не обновляет стиль данного типа инпут поля?
В статье четко указано, для каких элементов фон предназначен плагин.
Плагин хорош, только бы api для динамического изменения элементов. Например если нужно выбрать чекбокс то нужно в нем установить атрибут checked = «checked» если это радио кнопка то в нужно вызвать событие. click (). Это я к примеру. Апо в коде приходится проверять радио кнопка это или нет, что делает код менее читабельным и затрачивает + 2−3 минуты времени разработчика.
Здравствуйте! Есть ли у плагина возможность в выпадающем селекте выбирать активный option с помощью jquery?
От плагина тут ничего не зависит. Можете выбирать точно так же, как без плагина.
Спасибо. Я новичок по этому сразу не нашел решение. Использовал для селекта $(«option»).attr ("selected", «selected»), но на стилизованный плагин это не влияло. Тогда в демке заметил. trigger ('refresh'). $(«option»).attr ("selected", «selected»).trigger ('refresh'). Все заработало. Спасибо за плагин!
А как решать проблему что на Iphone селект не разворачивается ???
В айфоне открывается нативный выпадающий список, поэтому там стилизованный выпадающий список скрыт специально.
Ни чего там нативного не выпадает…
У меня выпадает.
Здравствуйте
Спасибо, за плагин и его поддержку.
Бывает довольно часто, что нужно обозначить родительскому блоку класс, что его ребенок чекбок к примеру имеет статус «.styler.checked». Есть ли возможность указать в настройках плагина эту опцию? Если нет, хотел бы вас попросить добавить в следующем обновлении плагина.
Заранее спасибо.
Нет такой возможности, да и не нужна она в плагине. Для этого достаточно написать отдельный код на проверку изменения состояния чекбокса.
Добрый день!
Т. е. , например, выбираю пункт 1…появляется точка, потом выбираю пункт 2, но переключения не происходит — остаются выбранными и пункт1, и пункт2.
Использовал Радиокнопки, но срабатывание происходить только на выбор.
Подскажите что не так? Опыта у меня мало или это баг в отработке плагина?
Заранее благодарен.
Смотрите здесь.
при form. reset () сбрасываются состояния элементов, но не их внешний вид (дивы не снимают класс checked). Вручную конечно убирается (снимать в js классы), но было бы неплохо, если бы эта функция была реализованна. Также эмуляция клика через js по скрытому резет-баттону не помогает.
Каким образом получить значение из селекта? val () не срабатывает. Потому как плагин не устанавливает selected для option. Какой-то аццкий косяк:(((Или я торможу?
У меня срабатывает.
Да, пардон, некорретно с селектом работал, через класс. Так val () не срабатывает.
Другой вопрос: разукрашиваем чекбокс, у него задано событие onclick="some_function (this)". Как это событие распространить на разукрашенный чекбокс. Увы в колбеке onFormStyled нет никаких входящих параметров, как еще ковырять непонятно, хочу универсальный вариант. От onclick отказаться не могу — используется готовый типовой компонент CMS, где так предопределено…
Через onclick никак, только onchange.
Подскажите как «сплющить» по вертикали свернутый селект? не нахожу где высоту можно указать.
В файле jquery.formstyler.css число 30 здесь:
до этого параметра css я дошел сам. Но при его уменьшении сам текст съезжает вниз, а не центрирован. И как я не менял разные параметры CSS центрирование текста мне добиться не удалось. Поэтому и прошу помощи.
i057.radikal.ru/1505/b9/599a6c3ceaee.jpg
Нужно поменять оба числа 30 и будет по центру.
А можно ли как-нибудь завязать ваш плагин и кастомный скролл? Хочу сделать чтобы в дропдауне селекта был красивый скролл, не получается (Не подскажете как быть? Спасибо!
Тут посмотрите ветку комментариев.
Перестает работать динамическое изменение цены. Dimox, помогите пожалуйста
Не понимаю, о чем вы.
шаблон default1.5.5.1 .2 установил модуль изменения цены в зависимости от выбора опции. установил jQuery Form Styler. плагин работает, селект видоизменил. но перестало фунциклировать изменение цены
Используйте. refresh ()
Dartess, извиняюсь за неграмотность, но стараюсь исправляться.) куда и как впихнуть. refresh ()
Добрый день, подскажите пожалуйста- как сделать чтобы определенные radiobutton не стилизовались? я как-то спрашивал, но найти ответ не вышло :(
Первый стилизуется, второй нет.
к сожалению такой вариант для меня невозможен :(
есть ли возможность сделать что-то вроде такого:
?
Нет, только так, как я указал выше.
Такой вариант разве не работает?
$('input:not (.nostyler)').styler ();
Как убрать открытие select вверх? почему-то находясь вверху сайта селект выводит опшены не в низ, а вверх
Смотрите опцию selectSmartPositioning.
Всем доброго времени суток! Подскажите как ограничить высоту выпадающего select меню, применил к родителю, не сработало.
Вот так:
На странице примеров это показано.
как отключить на андроиде?
Примерно так:
Как сделать выборку всех чекбоксов одним главным чекбоксом в таблице ну и обратную функцию если главный снят чекбокс то и все в таблице сняты.
Пример здесь — jsfiddle.net/Dimox/KgeSA/
Подскажите, как сделать, чтобы при клике по чекбоксу, для label также добавлялся класс «checked»? Это предусмотрено в плагине?
В плагине это не предусмотрено. Можно сделать следующим образом:
Сделал по подобию для radio кнопок с использованием label
Спасибо за отличный плагин, я начинающий веб-разработчик (самоучка) возник такой вопрос, можно ли твой плагин как-то интегрировать с плагинами для wp???
конкретный пример — есть плагин wpcc (конструктор калькулятора) — у его полей формы не корссбраузерное отображение… я просто даже примерно не понимаю как бы твой плагин скрестить с wpcc
Не понимаю, в чем проблема. Подключай мой плагин, как описано в статье, и оформляй селект через CSS.
отличный плагин.
не хочет выпадать селект на ipad и даже на демо сайте.
есть решение?
А нативный разве не выпадает?
нет, я проверяю через браузер chrome в режиме совместимости. и чел говорит у него на ipad ничего не выпадает
iPad у меня нет, но на iPhone я тестировал — там открывается нативный выпадающий список, поэтому я специально в плагине скрыл не нативный список для iOS. Странно, если он не открывается в iPad, т.к. ОС, насколько я знаю, в обоих случаях одна и та же.
А в режиме совместимости нативный список никак не увидеть, все-таки это эмуляция.
все решено, оказалось мне не то сообщили. не список не появляется, а просто ничего не происходит при выборе опции.
извиняюсь что заставил пересмотреть свой плагин.
супер плагин!!!
Как решили? То же самое, focused присваивает и всё, open нет.
Доброго времени суток! Хотел уточнить такой вопрос, можно ли после стилизации вашим плагином, сделать редактируемый select, что-то на подобии?
Заранее спасибо!