Автор статьи и плагина — хабраюзер DenisZ
jClever Forms — это плагин для стилизации HTML форм, который предоставляет свой API.
Опыт работы с такими стилизаторами форм, как jNice, jqTransform, Uniform заставил написать велосипед. Текущая версия практически полностью повторяет возможности jNice и даже дополняет их.
Возможности плагина:
- стилизация элементов форм типа select (выпадающий список) включая полосу прокрутки
- стилизация элементов форм типа checkbox (флажки)
- стилизация элементов форм типа radio button (переключатели)
- сброс формы (reset метод)
- отключение плагина (destroy метод)
- работа с коллекцией элементов формы (selectCollection)
- прямое управление выпадающими списками (selectSetPosition метод)
- прямое управление checkbox (checkboxSetState метод)
- прямое управление radio button (radioSetState метод)
В текущую реализацию плагина сознательно не включены обработка текстовых полей (input type text) и многострочных текстовых полей (textarea). Их обработка и стилизация, как правило, не вызывает затруднений. Возможно, в следующих версиях плагина этот подход будет пересмотрен.
Инициализация простейшая, всего лишь необходимо добавить класс, например, jClever к форме:
<form action="#" method="get" class="jClever">и инициализировать плагин по селектору:
jQuery('.jClever').jClever();Страница плагина: http://tools.alterego-russia.ru/jclever
Демо можно увидеть здесь: http://tools.alterego-russia.ru/jclever/example/index.html
Проект на гитхаб: https://github.com/denis-zavgorodny/jClever
Документация: http://tools.alterego-russia.ru/jclever/#docs
UPD:
- при перемещении по элементам формы добавлено выделение активного элемента
- исправлено поведение селектов (открытие, закрытие), перемещение по селектам с клавиатуры [up/down], обработка Enter, Tab и Space. Автоматическая промотка скролла вслед за перемещением по селекту ( спасибо merkuriy за замечания)
