. jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей

jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей

Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы:

  • флажок <input type="checkbox"> ;
  • переключатель <input type="radio"> ;
  • поле для выбора файла <input type="file"> .
  • поле для ввода чисел <input type="number"> .
  • раскрывающийся список <select> ;
  1. Демонстрация работы плагина
  2. Достоинства
  3. Недостатки
  4. Скачать
  5. Плагин «jQuery Form Styler»
  6. Подключение плагина
  7. Отключение плагина (метод destroy)
  8. Динамическое изменение
  9. Опции плагина
  10. Колбеки (callbacks)
  11. Локализация
  12. CSS-селекторы, используемые для оформления
  13. История изменений
  14. Стилизация без плагина
  15. Примеры различных решений

Демонстрация работы плагина

Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при оформлении элементов форм не использовано ни одного изображения, только CSS.

Достоинства

  • Общее:
  • Простота оформления с помощью CSS.
  • При отключенном JavaScript отображаются стандартные элементы форм, т.е. их работоспособность не теряется.
  • Псевдоэлементы выводятся внутристрочно, т.е. повторяют свойство стандартных элементов.
  • Поддержка работы с динамически добавляемыми/изменяемыми элементами.
  • Поддержка атрибутов checked , selected , disabled .
  • Атрибуты class , id , data-* , title , указанные у оригинальных элементов форм, передаются в соответствующие псевдоэлементы ( id передается с суффиксом, чтобы избежать дублирования).
  • Поддержка динамического добавления/изменения атрибутов class , id , data-* , title .
  • Поддержка сброса формы при нажатии на <input type="reset"> .
  • Умеет «ловить» нажатие клавиши Tab и позволяет переключать элементы с клавиатуры.
  • Кроссбраузерность (все современные браузеры, а также IE8 и выше).
  • Поддержка валидации HTML5.
  • Поддержка мультиязычности.

Для селектов:

  • Поддерживает атрибут multiple , т.е. позволяет выбирать несколько пунктов (мультиселект).
  • Поддерживает группировку элементов списка в селекте (тег <optgroup> ).
  • Позволяет задать максимальную высоту для выпадающего списка (CSS-свойством max-height , либо через опцию selectVisibleOptions ).
  • Поддерживает «умное позиционирование», т.е. не уходит за видимую часть страницы при открытии списка.
  • Поддержка поиска по пунктам одиночного селекта.
  • Поддержка замещающего текста (placeholder).
  • Автоматически подстраивает ширину, если она не указана.
  • Поддерживает прокрутку колесом мыши.

Недостатки

При использовании некоторых нестандартных шрифтов (например, Open Sans, подключенный с Google Fonts), неправильно определяется ширина псевдоселекта, в связи с чем текст пунктов обрезается. Это связано с тем, что шрифт применяется лишь после стилизации селекта плагином. Как вариант решения этой проблемы, можно сделать отложенный запуск скрипта:

Еще один вариант решения — использовать специальный скрипт, который переинициализирует плагин после окончания загрузки шрифта.

Скачать

Плагин «jQuery Form Styler»

Версия: 2.0.1 | Последнее обновление: 29.08.2017

Подключение плагина

Для работы плагина необходимо использовать jQuery не ниже версии 1.7.0.

Подключите jQuery (если он еще не подключен), плагин и стили к нему, добавив следующие строки перед тегом </head> :

Файл jquery.formstyler.css — это обязательные стили, необходимые для корректной работы плагина, а jquery.formstyler.theme.css — визуальное оформление элементов форм.

Для активации плагина примените метод .styler к тегам, которые хотите стилизовать:

Отключение плагина (метод destroy)

Если есть необходимость отвязать плагин от стилизованного элемента, то задействуйте метод destroy :

Динамическое изменение

При динамическом изменении элементов формы необходимо запустить триггер refresh , например:

При использовании сторонних плагинов, например, jQuery Validation, которые меняют атрибуты элементов формы, событие .trigger('refresh') необходимо запускать, используя setTimeout , иначе состояния псевдоэлементов не изменится. Пример с вышеуказанным плагином:

Опции плагина

Большинство опции плагина можно переопределить для конкретного тега, указав ему соответствующий data-атрибут.

ОпцияПо умолчаниюОписаниеdata-атрибут idSuffix -styler суффикс к атрибуту id , передаваемому от стилизуемого элемента filePlaceholder Файл не выбран текст по умолчанию в поле выбора файла (когда файл не выбран) data-placeholder fileBrowse Обзор. текст кнопки у поля для выбора файла data-browse fileNumber Выбрано файлов: %s текст после выбора нескольких файлов, вместо %s вставится число data-number selectPlaceholder Выберите. замещающий текст (плейсхолдер) в одиночном селекте; отображается, если по умолчанию выбран первый пункт с отсутствующим текстом: <option></option> data-placeholder selectSearch false показывать поисковое поле в одиночном селекте ( true — да, false — нет) data-search selectSearchLimit 10 минимальное количество пунктов одиночного селекта, при котором показывать поиск data-search-limit selectSearchNotFound Совпадений не найдено текст сообщения о том, что нет пунктов, удовлетворяющих поиску data-search-not-found selectSearchPlaceholder Поиск. текст по умолчанию в поисковом поле data-search-placeholder selectVisibleOptions 0 количество отображаемых пунктов списка в простом селекте без прокрутки data-visible-options selectSmartPositioning true умное позиционирование для выпадающего списка селекта: true — работает вверх и вниз false — работает только вниз '-1' — позиционирование отключено data-smart-positioning locale ru текущая локаль locales английская локализациямассив локалей с переводом соответствующих опций, подробнее смотрите здесь

Колбеки (callbacks)

НазваниеПо умолчаниюОписание onSelectOpened function() запускается при раскрытии списка селекта, целевой селект можно захватить через $(this) onSelectClosed function() запускается при закрытии списка селекта, целевой селект можно захватить через $(this) onFormStyled function() запускается после выполнения плагина

Локализация

Плагин поддерживает многоязычность. Для этого используются опции locale и locales .

Пример локализации (английская по умолчанию включена в плагин):

CSS-селекторы, используемые для оформления

Чекбокс .jq-checkbox чекбокс по умолчанию .jq-checkbox__div дополнительный вложенный тег .jq-checkbox.checked выбранный чекбокс .jq-checkbox.disabled неактивный (недоступный для выбора) чекбокс .jq-checkbox.focused фокус на чекбоксе, когда нажата клавиша Tab .jq-checkbox span дополнительный вложенный тегРадиокнопка .jq-radio радиокнопка по умолчанию .jq-radio__div дополнительный вложенный тег .jq-radio.checked выбранная радиокнопка .jq-radio.disabled неактивная (недоступная для выбора) радиокнопка .jq-radio.focused фокус на радиокнопке, когда нажата клавиша Tab .jq-radio span дополнительный вложенный тегПоле для выбора файла .jq-file родительский контейнер .jq-file.focused фокус на поле .jq-file.changed файл выбран .jq-file.disabled неактивное поле .jq-file__name поле с именем файла .jq-file__browse кнопка выбора файлаПоле для ввода чисел .jq-number родительский контейнер .jq-number.focused фокус на поле .jq-number.disabled неактивное поле .jq-number__field обертка для поля ввода .jq-number__spin.minus кнопка «минус» .jq-number__spin.plus кнопка «плюс»Селект (простой) .jq-selectbox родительский контейнер .jq-selectbox.opened выпадающий список селекта раскрыт .jq-selectbox.dropup выпадающий список селекта раскрыт вверх .jq-selectbox.dropdown выпадающий список селекта раскрыт вниз .jq-selectbox.changed выбрано значение, отличное от заданного по умолчанию .jq-selectbox__select селект в свернутом состоянии .focused .jq-selectbox__select фокус на селекте, когда нажата клавиша Tab .disabled .jq-selectbox__select неактивный (недоступный для выбора) селект .jq-selectbox__select-text дополнительный вложенный тег для свернутого селекта .jq-selectbox .placeholder замещающий текст .jq-selectbox__trigger правая часть свернутого селекта (условный переключатель) .jq-selectbox__trigger-arrow вложенный тег для переключателя (стрелка) .jq-selectbox__dropdown обертка для выпадающего списка .jq-selectbox__search обертка для поискового поля .jq-selectbox__search input поисковое поле .jq-selectbox__not-found сообщение об отсутствии результатов поиска .jq-selectbox ul выпадающий список .jq-selectbox li пункт (опция) селекта .jq-selectbox li.selected выбранный пункт селекта .jq-selectbox li.disabled неактивный (недоступный для выбора) пункт селекта .jq-selectbox li.optgroup заголовок для группы пунктов .jq-selectbox li.option пункт списка в группеСелект (множественный) .jq-select-multiple родительский контейнер .jq-select-multiple.disabled неактивный (недоступный для выбора) селект .jq-select-multiple li пункт (опция) селекта .jq-select-multiple li.selected выбранный пункт селекта .jq-select-multiple li.disabled неактивный (недоступный для выбора) пункт селекта .jq-select-multiple li.optgroup заголовок для группы пунктов .jq-select-multiple li.option пункт списка в группеПрочие элементы (только CSS) .styler класс, используемый для стилизации текстовых полей и кнопок (работает независимо от плагина)

История изменений

Стилизация без плагина

Если вам необходимо стилизовать только радиокнопки или чекбоксы, то это можно сделать без данного плагина, используя лишь CSS. В таком случае рекомендую использовать решение из этой статьи.

📎📎📎📎📎📎📎📎📎📎