![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)
Подскажите, как правильно реализовать select All для множества чекбоксов. Я использую такой скрипт (пишу в CoffeeScript, думаю будет понятно):
Визуально все чекбоксы выделяются, но в параметрах на сервер ничего не приходит. Думаю я упустил что-то простое из виду, но пока не понял, что именно.
Решение здесь.
Добрый день, покажите пример используя класс. changed (появляется зеленая обводка) для select? не могу понять как его использовать?
Привет, спасибо за плагин!
В последней версии была добавлена стилизация input[type="number"]. Воспользовавшись этим, не смог повесить событие «change», а вот без стилизации события срабатывали. Было бы неплохо добавить и этот функционал :). Если реализован, то приведите пример корректного использования
Покажите пример того, что вы делали.
есть возможность передавать в options например спан и он отображался так же и в li, dropdowne?
например EDT — Current Location 6:02 PM и это выглядело как EDT — Current Location 6:02 PM
Нельзя.
Пожелания для автора.
1) Уберите из кода инлайн стили и пропишите их в css.
2) В выпадающем блоке добавьте обертывающий див для списка и выставляйте для него min-height. Это нужно для подключения плагина стилизации скролбара.
3) Допишите для ul и li классы по бэму «.jq-selectbox__list» и «.jq-selectbox__item» например.
4) Добавить колбеки на событие инициализации селекта, изменения размера выпадающей часи (на всякий случай), обновления и на destroy.
Ещё один недостаток: в Андроиде не работает «умное позиционирование» и не работает ограничение по высоте для селектов
Про позиционирование подтверждаю. Только вряд ли смогу что-то с этим сделать. А ограничение по высоте у меня работает.
Здравствуйте, а можно ли, например, к .jq-checkbox__div, добавить свой класс? Обычно для чекбоксов использую галочку. Сейчас чтобы не нарезать картинки, обычно использую fontawesome.
Нет, но можно добавить его к родительскому тегу.
Пожелание: добавьте префик\суффикс к классу dropdown, может пересекаться с другими элементами с этим классом
В плагине нет класса
dropdown, есть толькоjq-selectbox__dropdown.есть, вот в коде нашел
Точно, я плохо искал =) Да, надо будет заменить.
Здравствуйте.
Подскажите, есть ли возможность выставлять в селектах вместо начального значения «выберите» значение из тега option с атрибутом selected?
Естественно можно, как и в нативном селекте.
Приветствую!
Не могу понять в чем дело — при использовании плагина для радиокнопок (input type="radio"), если мы выбрали одну из радиокнопок, при нажатии на вторую не убирается класс checked у первой выбраной и соответственно обе кнопки остаются подсвеченными.
Смотрите здесь.
Спасибо, получилось!
Дополнение к предыдущему комментарию (не убирается класс checked у радиокнопок) test.forweb52.ru/test/
Здравствуйте. При открытии одного select, а затем другого (который находится выше) получается вот так monosnap.com/file/6cOQcZA1f97TJTjKAJA7PW4Kb5fm8d.png
Возможно есть какое-нибудь решение проблемы?
Покажите живой пример. На странице примеров плагина можно увидеть, что там с этим все в порядке, поэтому предполагаю, что причина в ваших стилях.
Решение для jScrollPane плохо работает с вашим скриптом. Мешает строка, запрещающая скролить список колёсиком. Закоментировав её, я избавился от проблемы. Но она обычно не добавляется просто так. Это можно как-то решить по-хорошему?
Подскажите как программно сбросить Select (выпадающий список)?
Ищите в статье «destroy».
Столкнулась с проблемой у селекта в андройде не рабоатет скрол дропдауна. У других заметила список как и на ios системный выдаётся, а в данном плагине нет, из-за этого очень серёзный баг. Как можно исправить?
Только что проверил — у меня скролл на Андроиде работает.
На последней версии на iphone не работает select
У меня форма находится в теге fieldset и select когда раскрываешь не видно нижних строк, а при прокрутке все равно до низа не доходит и вследтсвии не возможно выбрать строки, каким образом сделать список поверх всех, пробовал добавить z-index не помогло?
Покажите живой пример.
ссылка на скрин s018.radikal.ru/i512/1511/03/933daabec304.jpg
и еще вопрос, а каким образом сделать когда после выбора select подсвечивался
Я просил живой пример, а не скрин. По скрину причину не выяснить.
На странице с примерами это есть.
Использовал Ваш плагин предыдущей версии. За ненадобностью выпилит из него все кроме селекта.
Сам селект тоже пришлось допиливать.
Сделал соже что и писал «Сдфвшьшк» в посте выше.
1) Добавлял поддержку для телефонов. В текущей версии она есть, но не очень хорошая. Сделайте пожалуйста для Android и iOS чтобы открывался нативный селект (у вас почемуто только для iOS).
2) сделать мультиселект так же выпадающим.(хотябы опцией).
3) Можно сделать опцию для того чтоб при клике на optgroup выбирались все опшены в мультиселекте.
Тег select не закрывается после выбора из выпадающего списка. Приходится либо закрывать самому, кликая где-нибудь в другом месте, либо выбирать выпадающий пункт двойным щелчком. Не подскажете как исправить?
У меня такого не наблюдается.
Дважды вызывается change если (элемент обёрнут в label) && (вызывается trigger ('refresh'))
jsfiddle.net/0xzjv3ho/
Зачем вызывать trigger (‘refresh') через change?
Конкретно в моём случае, если очень грубо, то значение уходит на валидацию и может вернутся другое значение, устанавливаю его и вызываю 'refresh'.
В версии 1.6.1 такого не было обновил до 1.7.4 и появился этот странный баг.
День добрый!
Было бы удобно, если при клике на select фокус будет сразу на поле поиска (при его наличии конечно).
Привет! У меня случился странный баг: радиокнопки выбираются все. Атрибуты name прописал одинаковые, но при этом класс checked не убирается при клике на другую кнопку. Что бы это могло быть?
Ответ здесь.