![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>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
![jQuery-плагин для стилизации input[type=”radio”]](https://dimox.name/wp-content/themes/dimox.name/cache/80/a42f338b3e2d480_432x240.png)
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью ...
![jQuery-плагин для стилизации input[type=”checkbox”]](https://dimox.name/wp-content/themes/dimox.name/cache/4b/7288f3ab36d374b_432x240.png)
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Как и обещал ранее, делюсь своим очередным jQuery-скриптом в ...
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Одна из самых неприятных (и я бы даже сказал ...
Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать 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 центрирование текста мне добиться не удалось. Поэтому и прошу помощи.
http://i057.radikal.ru/1505/b9/599a6c3ceaee.jpg
Нужно поменять оба числа 30 и будет по центру.
А можно ли как-нибудь завязать ваш плагин и кастомный скролл? Хочу сделать чтобы в дропдауне селекта был красивый скролл, не получается( Не подскажете как быть? Спасибо!
Тут посмотрите ветку комментариев.
Перестает работать динамическое изменение цены. Dimox, помогите пожалуйста
Не понимаю, о чем вы.
шаблон default 1.5.5.1.2 установил модуль изменения цены в зависимости от выбора опции. установил jQuery Form Styler. плагин работает, селект видоизменил. но перестало фунциклировать изменение цены
Используйте .refresh()
Dartess, извиняюсь за неграмотность, но стараюсь исправляться. ) куда и как впихнуть .refresh()
Добрый день, подскажите пожалуйста- как сделать чтобы определенные radiobutton не стилизовались? я как-то спрашивал, но найти ответ не вышло :(
Первый стилизуется, второй нет.
к сожалению такой вариант для меня невозможен :(
есть ли возможность сделать что-то вроде такого:
?
Нет, только так, как я указал выше.
Такой вариант разве не работает?
$(‘input:not(.nostyler)’).styler();
Как убрать открытие select вверх? почему-то находясь вверху сайта селект выводит опшены не в низ а вверх
Смотрите опцию selectSmartPositioning.
Всем доброго времени суток! Подскажите как ограничить высоту выпадающего select меню, применил к родителю , не сработало.
Вот так:
На странице примеров это показано.
как отключить на андроиде?
Примерно так:
Как сделать выборку всех чекбоксов одним главным чекбоксом в таблице ну и обратную функцию если главный снят чекбокс то и все в таблице сняты.
Пример здесь – http://jsfiddle.net/Dimox/KgeSA/
Подскажите, как сделать, чтобы при клике по чекбоксу, для label также добавлялся класс “checked”? Это предусмотрено в плагине?
В плагине это не предусмотрено. Можно сделать следующим образом:
Сделал по подобию для radio кнопок с использованием label
Спасибо за отличный плагин, я начинающий веб-разработчик (самоучка) возник такой вопрос, можно ли твой плагин как-то интегрировать с плагинами для wp???
конкретный пример – есть плагин wpcc (конструктор калькулятора) – у его полей формы не корссбраузерное отображение…. я просто даже примерно не понимаю как бы твой плагин скрестить с wpcc
Не понимаю, в чем проблема. Подключай мой плагин, как описано в статье, и оформляй селект через CSS.
отличный плагин.
не хочет выпадать селект на ipad и даже на демо сайте.
есть решение?
А нативный разве не выпадает?
нет, я проверяю через браузер chrome в режиме совместимости. и чел говорит у него на ipad ничего не выпадает
iPad у меня нет, но на iPhone я тестировал – там открывается нативный выпадающий список, поэтому я специально в плагине скрыл не нативный список для iOS. Странно, если он не открывается в iPad, т.к. ОС, насколько я знаю, в обоих случаях одна и та же.
А в режиме совместимости нативный список никак не увидеть, все-таки это эмуляция.
все решено, оказалось мне не то сообщили. не список не появляется, а просто ничего не происходит при выборе опции.
извиняюсь что заставил пересмотреть свой плагин.
супер плагин!!!
Как решили? То же самое, focused присваивает и всё, open нет.
Доброго времени суток! Хотел уточнить такой вопрос , можно ли после стилизации вашим плагином , сделать редактируемый select , что то на подобии ?
Заранее спасибо!