В данном плагине я объединил 3 своих предыдущих jQuery-плагина, плюс добавил возможность стилизации полей для отправки файлов. Таким образом, он позволяет стилизовать с помощью CSS следующие html-элементы:
- раскрывающийся список
<select>
; - флажок
<input type="checkbox">
; - переключатель
<input type="radio">
; - поле для выбора файла
<input type="file">
.
Демонстрация работы плагина
Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при оформлении элементов форм не использовано ни одного изображения, только 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), неправильно определяется ширина псевдоселекта, в связи с чем текст пунктов обрезается. Это связано с тем, что шрифт применяется лишь после стилизации селекта плагином. Как вариант решения этой проблемы, можно сделать отложенный запуск скрипта:
setTimeout(function() { $('input, select').styler(); }, 100)
Еще один вариант решения — использовать специальный скрипт, который переинициализирует плагин после окончания загрузки шрифта.
- В Mac OS при переключении селекта с клавиатуры появляется нативный выпадающий список.
Скачать
Плагин «jQuery Form Styler»
Версия: 1.7 | Последнее обновление: 21.06.2015 | Страница на GitHub
Подключение плагина
Для работы плагина необходимо использовать jQuery не ниже версии 1.7.0.
Подключите jQuery (если он еще не подключен), плагин и стили к нему, добавив следующие строки перед тегом
</head>
:<link href="путь_к_файлу/jquery.formstyler.css" rel="stylesheet" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="путь_к_файлу/jquery.formstyler.min.js"></script>
Для активации плагина примените метод
.styler
к тегам, которые хотите стилизовать:(function($) { $(function() { $('input, select').styler(); }); })(jQuery);
Отключение плагина (метод destroy)
Если есть необходимость отвязать плагин от стилизованного элемента, то задействуйте метод destroy
:
$('select').styler('destroy');
Динамическое изменение
При динамическом изменении элементов формы необходимо запустить триггер refresh
, например:
$('button').click(function(e) {
e.preventDefault();
/* делаем чекбокс неактивным */
$('input:checkbox').attr('disabled', true)
/* обновляем состояние псевдочекбокса */
.trigger('refresh');
});
При использовании сторонних плагинов, например, jQuery Validation, которые меняют атрибуты элементов формы, событие .trigger('refresh')
необходимо запускать, используя setTimeout
, иначе состояния псевдоэлементов не изменится. Пример с вышеуказанным плагином:
$('form').validate({
invalidHandler: function() {
setTimeout(function() {
$('input, select').trigger('refresh');
}, 1)
}
});
Опции плагина
Большинство опции плагина можно переопределить для конкретного тега, указав ему соответствующий data-атрибут.
Опция | По умолчанию | Описание | data-атрибут |
---|---|---|---|
wrapper | form | обертка стилизуемых элементов | |
idSuffix | -styler | суффикс к атрибуту id , передаваемому от стилизуемого элемента | |
filePlaceholder | Файл не выбран | текст по умолчанию в поле выбора файла (когда файл не выбран) | data-placeholder |
fileBrowse | Обзор... | текст кнопки у поля для выбора файла | data-browse |
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 |
singleSelectzIndex | 100 | уровень слоя с псевдоселектом | data-z-index |
selectSmartPositioning | true | умное позиционирование для выпадающего списка селекта:true — работает вверх и внизfalse — работает только вниз'-1' — позиционирование отключено | data-smart-positioning |
Колбеки (callbacks)
Название | По умолчанию | Описание |
---|---|---|
onSelectOpened | function() {} | запускается при раскрытии списка селекта, целевой селект можно захватить через $(this) |
onSelectClosed | function() {} | запускается при закрытии списка селекта, целевой селект можно захватить через $(this) |
onFormStyled | function() {} | запускается после выполнения плагина |
Пример использования:
(function($) {
$(function() {
$('input, select').styler({
fileBrowse: 'Выбрать',
singleSelectzIndex: '999',
onSelectOpened: function() {
// к открытому селекту добавляется красная обводка
$(this).css('outline', '3px solid red');
}
});
})
})(jQuery)
История изменений
Находится здесь.
|
|
|
не работает в position: sticky
|
Наши клиенты
Контакты
ООО "Парнас"
420111
г. Казань, ул. Пушкина 18
Телефон :
8-843-236-6001
8-499-550-6001
Почта :
mail@parnas-it.com