25-05-2016, Скрипты

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

  • флажок <input type="checkbox">;
  • переключатель <input type="radio">;
  • поле для выбора файла <input type="file">.
  • поле для ввода чисел <input type="number">.
  • раскрывающийся список <select>;
к содержанию ↑

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

Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при оформлении элементов форм не использовано ни одного изображения, только 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), неправильно определяется ширина псевдоселекта, в связи с чем текст пунктов обрезается. Это связано с тем, что шрифт применяется лишь после стилизации селекта плагином. Как вариант решения этой проблемы, можно сделать отложенный запуск скрипта:

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

  • В Mac OS при переключении селекта с клавиатуры появляется нативный выпадающий список.
к содержанию ↑

Скачать

Плагин «jQuery Form Styler»

Версия: 1.7.4 | Последнее обновление: 12.09.2015

Плагин на GitHub | Плагин в CDN jsDelivr

к содержанию ↑

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

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

  1. Подключите jQuery (если он еще не подключен), плагин и стили к нему, добавив следующие строки перед тегом </head>:
  2. Для активации плагина примените метод .styler к тегам, которые хотите стилизовать:
к содержанию ↑

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

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

к содержанию ↑

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

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

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

к содержанию ↑

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

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

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

Колбеки (callbacks)

НазваниеПо умолчаниюОписание
onSelectOpenedfunction() {}запускается при раскрытии списка селекта, целевой селект можно захватить через $(this)
onSelectClosedfunction() {}запускается при закрытии списка селекта, целевой селект можно захватить через $(this)
onFormStyledfunction() {}запускается после выполнения плагина

Пример использования:

к содержанию ↑

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. В таком случае рекомендую использовать решение из этой статьи.

к содержанию ↑

Примеры различных решений

Источник: http://dimox.name/jquery-form-styler

Теги:
[Всего голосов: 0    Средний: 0/5]

RomualdShmidtelson

Веб-разработчик. Работа с проектами простой и средней сложности. Верстка, программирование. Simpla, Drupal, Wordpress.

Отправить письмо