jQuery Form Styler ^2.0.2

jQuery-плагин для стилизации элементов HTML-форм:

• <input type="checkbox">
• <input type="radio">
• <input type="file">
• <input type="number">
• <select>

Ссылки

• Страница с примерами
• Домашняя страница плагина
• Плагин в CDN jsDelivr

Лицензия

MIT

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

2.0.2 ^22.10.2017

• Исправлено: нативный селект выходил вправо за область псевдоселекта, из-за чего пространство справа от псевдоселекта становилось кликабельным.

2.0.1 ^29.08.2017

• Изменено: в отмеченном чекбоксе теперь галочка вместо квадрата.
• Исправлено: неверный путь в параметре main файла package.json.
• Исправлено: для <input type="number"> не срабатывало событие input при нажатии на переключатели.

2.0.0 ^08.05.2017

• Добавлено: вызов события click для <input type="checkbox"> и <input type="radio"> (#130).
• Изменено: все обязательные стили вынесены из скрипта в отдельный файл - jquery.formstyler.css, а оформление - в jquery.formstyler.theme.css.
• Изменено: удалена опция singleSelectzIndex (z-index для селекта теперь задается через css-файл).
• Изменено: нативная прокрутка списка пунктов селекта (#127).
• Исправлено: при динамическом изменении <input type="file"> у псевдоэлемента сбрасывалось значение при том, что оно сохранялось у оригинального элемента.

1.7.8 ^17.02.2017

• Исправлено: при отключенном умном позиционировании в селекте (selectSmartPositioning = '-1') не работала опция selectVisibleOptions.
• Исправлено: высота выпадающего списка селекта считалась неверно, когда был задан selectPlaceholder, включена опция selectVisibleOptions и не указан min-height для .jq-selectbox li.
• Исправлено: (#122).

1.7.7 ^08.01.2017

• Добавлено: поддержка мультиязычности.
• Добавлено: (#108).
• Изменено: в bower.json имя jquery-form-styler на jquery.form-styler.
• Исправлено: при использовании jQuery 3+ выпадающий список селекта раскрывался только вверх.
• Исправлено: в package.json была неправильно заполнена секция "main".

1.7.6 ^05.06.2016

• Добавлено: поддержка дробных чисел в <input type="number">.
• Добавлено: поддержка передаваемых атрибутов в <input type="number">.
• Изменено: рефакторинг кода передаваемых атрибутов от оригинальных элементов.
• Изменено: группы радиокнопок (с одинаковым атрибутом name) теперь работают и вне тега <form>. В связи с этим удалена опция wrapper.
• Изменено: подкорректированы стили для <input type="file">, чтобы в браузерах на движке Blink cursor: pointer срабатывал по всему полю.
• Исправлено: улучшен расчет высоты выпадающего списка в селекте, он мог выходить за пределы экрана (#93).
• Исправлено: улучшена скорость подсчета ширины селекта на больших списках (#95).
• Исправлено: плейсхолдер в селекте теперь отображается только в случае, если по умолчанию выбран первый пункт с отсутствующим текстом.

1.7.5 ^29.05.2016

• Добавлено: поддержка события change для тега <input type="number">.
• Исправлено: выпадающий список селекта не раскрывался вверх в тех случаях, когда должен был.

1.7.4 ^12.09.2015

• Исправлено: #86.
• Исправлено: #88.

1.7.3 ^05.09.2015

• Добавлено: новая опция fileNumber для текста "Выбрано файлов: N".
• Изменено: при выборе файлов в файловом поле с множественным выбором теперь вместо перечисления списка файлов отображается текст "Выбрано файлов: N".
• Исправлено: #82.

1.7.2 ^15.07.2015

• Добавлено: поддержка стилизации тега <input type="number">.

1.7.1 ^12.07.2015

• Исправлено: ошибка в колбеке onFormStyled в случае отсутствия элементов для стилизации.
• Исправлено: не передавались атрибуты id и title из тега <option>.

1.7 ^21.06.2015

• Добавлено: настройки плагина теперь можно извлечь из любого стилизованного элемента.
• Добавлено: метод destroy для отвязки плагина от элемента.
• Изменено: рефакторинг способа инициализации плагина.
• Исправлено: устранена утечка памяти, связанная с $(document).click() (#54).
• Исправлено: текст длинного пункта выходил за пределы селекта с заданной шириной.

1.6.4 ^07.06.2015

• Исправлено: неправильная ширина селекта, когда первый пункт длиннее остальных (ширина селекта менялась при выборе пунктов).

1.6.3 ^10.04.2015

• Исправлено: в тегах <option>, находящихся внутри <optgroup>, не передавались data-атрибуты.
• Исправлено: #70.
• Исправлено: #72.

1.6.2 ^21.02.2015

• Исправлено: если кликнуть на селект, у которого есть плейсхолдер, и нажать на любую клавишу на клавиатуре, то текст плейсхолдера пропадал.
• Исправлено: ошибки прокрутки в выпадающем списке селекта, когда у него есть плейсхолдер.
• Исправлено: проверка на iOS и Android срабатывала и на Windows-смартфонах.
• Изменено: если выпадающий список селекта выходит за правый край окна браузера, то позиционирование меняется с левого на правое.

1.6.1 ^23.11.2014

• Добавлено: поддержка AMD и CommonJS.
• Исправлено: если в теге <label>, который обрамляет <input type="checkbox"> или <input type="radio">, находилась ссылка, то по ней нельзя было перейти.
• Исправлено: в IE9, если у псевдоселекта не была задана ширина, то она "скакала" при наведении.
• Исправлено: если плейсхолдер селекта был длиннее, чем <option>, то он обрезался.
• Исправлено: в псевдоселектах к тегам <li> теперь не добавляется атрибут class, если он пустой.
• Изменено: CSS-свойства, прописанные в плагине тегам <li> в псевдоселектах, перенесены в CSS-файл.

1.6 ^04.10.2014

• Добавлено: возможность указать опции плагина конкретным тегам через data-атрибуты.
• Добавлены новые классы: при открытии выпадающего селекта вверх (.dropup) и вниз (.dropdown).
• Исправлено: не всегда корректно рассчитывалась ширина стилизованного селекта.
• Исправлено: не передавались data-атрибуты от оригинальных элементов.

1.5.6 ^08.09.2014

• Добавлено: выпадающий список селекта теперь можно открывать/закрывать пробелом.
• Изменено: отключена стилизация мультиселекта в Android (в стилизованном селекте нет возможности выбрать несколько пунктов) и iOS (в стилизованном селекте неправильно отображаются выбранные пункты).

1.5.5 ^29.08.2014

• Добавлено: поддержка замещающего текста для селекта (placeholder), который может быть задан через опцию selectPlaceholder или атрибут data-placeholder, и класс .placeholder для его оформления.
• Добавлено: защита от XSS в селекте. В предыдущих версиях плагина, если в опцию вставить <script> в виде escape-последовательности, то он исполнялся при выборе этой опции.
• Изменено: поиск в селекте теперь по умолчанию выключен.

1.5.4 ^12.07.2014

• Изменено поведение опции selectSmartPositioning, теперь она может иметь 3 значения (подробнее - в описаниях опций плагина).
• Исправлено: в Internet Explorer не добавлялся класс .opened для открытого селекта.
• Исправлено: в Internet Explorer не всегда срабатывал колбек onSelectOpened.

1.5.3.4 ^05.07.2014

• Исправлено: не всегда срабатывал .change() для мультиселектов.
• Исправлено: некорректно работал колбек onSelectClosed.

1.5.3.3 ^20.06.2014

• Исправлено: в одиночном селекте при переключении на пункт с таким же названием, как у выбранного, не срабатывало событие change.
• Исправлено: при клике на пункт мультиселекта удалялся класс .focused.
• Изменено: при клике на пункт одиночного селекта последнему теперь возвращается фокус (поведение стандартного селекта).

1.5.3.2 ^07.06.2014

• Изменено: при открытии селекта поисковое поле теперь не получает фокус, чтобы можно было переключать пункты с клавиатуры.
• Исправлено: при переключении раскрытого селекта с клавиатуры, если присутствовал вертикальный скроллинг, текущий пункт уходил за пределы видимости.

1.5.3.1 ^02.06.2014

• Исправлено: не работал .on('change' ...) для селектов.

1.5.3 ^01.06.2014

• Исправлено: после предыдущего обновления некорректно работал .trigger('refresh').
• Код плагина приведен в порядок в соответствии с рекомендациями jshint.

1.5.2 ^28.05.2014

• Исправлено: если у файлового поля есть атрибут multiple, то при выборе нескольких файлов отображалось название только одного из них.
• Исправлено: устранена утечка памяти при запуске .trigger('refresh').
• Исправлено: #44.

1.5.1 ^03.05.2014

• Исправлено: при динамическом добавлении пунктов в селект переставал открываться выпадающий список в Internet Explorer.
• Добавлено: стили для кнопок с классом .styler, имеющих атрибут disabled.

1.5 ^24.04.2014

• Добавлено: к файловому полю теперь добавляется класс .changed, когда файл выбран.
• Исправлено: не всегда корректно добавлялся класс .focused, когда селект получал фокус.
• Исправлено: при фокусе на селекте нажатие клавиш Space и Enter открывало нативный список селекта.
• Исправлено: в iOS не добавлялся класс .changed при изменении селекта.
• Исправлено: #38.

1.4.9 ^18.03.2014

• Добавлены колбеки, срабатываемые при открытии селекта (onSelectOpened), при закрытии селекта (onSelectClosed) и после выполнения плагина (onFormStyled).
• Заменены все bind и unbind на on и off.
• Убрано переключение чекбокса по нажатию Enter.

1.4.8.3 ^01.03.2014

• Исправлено: #35.

1.4.8.2 ^26.02.2014

• Исправлено: #33.

1.4.8.1 ^17.02.2014

• Исправлено: не всегда правильно формировалась ширина псевдоселекта.

1.4.8 ^02.02.2014

• Изменено: снова переработан способ формирования ширины псевдоселекта. Решил отказаться от возможности задания ширины оригинальному элементу, т.к это только сильно все усложняло. Теперь задать ширину можно только через селекторы .jq-selectbox и .jq-select-multiple для одиночного и мультиселекта соответственно.
• Исправлено: если при повторном выборе файла сделать отмену, то плейсхолдер не возвращался.

1.4.7 ^21.12.2013

• Добавлено: на iOS при прокрутке мультиселекта теперь отображается вертикальный скроллинг.
• Добавлено: опция wrapper на случай, если стилизуемые элементы находятся вне тега form.
• Изменено: доработана функция preventScrolling() (#25).
• Исправлено: если параметр selectVisibleOptions был больше нуля, то при каждом последующем клике на селект высота выпадающего списка уменьшалась в 2 раза.

1.4.6 ^08.12.2013

• Добавлено: поиск в одиночном селекте и соответствующие опции (selectSearch, selectSearchLimit, selectSearchNotFound, selectSearchPlaceholder).
• Исправлено: в Mac OS X нельзя было выбрать несколько значений в мультиселекте (по аналогии с зажатым Ctrl на Windows).
• Изменено: полностью переработана система умного позиционирования для выпадающего списка селекта.
• Изменено: опция browseText переименована в fileBrowse.

1.4.5 ^24.11.2013

• Добавлена поддержка динамического добавления/изменения атрибутов class, id, data-*, title.

1.4.4 ^17.11.2013

• Добавлена поддержка сброса формы при нажатии на <input type="reset">.

1.4.3 ^09.11.2013

• Решена проблема с селектом в iOS.

1.4.2 ^03.11.2013

• Добавлено: свойства margin: 0 и padding: 0 к оригинальным полям.
• Исправлено: проблема с шириной селекта при изменении размера окна браузера.

1.4.1 ^27.10.2013

• Исправлено: доработан способ скрытия чекбоксов и радиокнопок, чтобы они не переключались при клике на область рядом с псевдоэлементами.

1.4 ^13.10.2013

• Добавлено: плейсхолдер для поля выбора файла (новая опция - filePlaceholder).
• Изменены стили для поля выбора файла.
• Изменен способ скрытия оригинальных элементов, благодаря чему теперь поддерживается HTML5-валидации.
• Исправлено: ширина селекта, указанная в процентах, теперь меняется, как положено, при изменении ширины его родительского контейнера.

1.3.9 ^03.10.2013

• Добавлено: поддержка data-* атрибутов для тега option.
• Изменено: ширину для мультиселекта теперь можно задавать тегу <select>.
• Исправлено: ширина для селекта, указанная в процентах, работала неправильно.

1.3.8.2 ^06.09.2013

• Исправлено: при использовании jQuery версий 1.7-1.8.3 после выбора пункта селекта у родительского контейнера удалялись все классы.

1.3.8.1 ^21.08.2013

• Исправлена некорректная работа первых двух изменений предыдущей версии плагина в случае, когда для тега option добавлялся атрибут selected.

1.3.8 ^12.08.2013

• Добавлено: в одиночном селекте при выборе пункта, отличного от значения по умолчанию, добавляется класс .changed, указывающий, что селект изменен (смотрите примеры).
• Добавлено: если у option указан какой-либо класс, то при выборе соответствующего пункта этот класс добавляется к родительскому тегу псевдоселекта (смотрите примеры).
• Изменено: все теги span заменены на div; ранее это было необходимо для поддержки IE7, в котором свойство display: inline-block без хаков работает только для строчных элементов.
• Изменено: полностью изменена методика задания ширины одиночного превдоселекта, теперь ширину можно задавать стандартным способом (т.е. тегу <select>), как если бы плагин был отключен.
• Исправлено: класс .opened не всегда удалялся, когда это было нужно.

1.3.7 ^27.05.2013

• Добавлено: в псевдоэлементы передается атрибут title, указанный у оригинальных элементов.
• Незначительные изменения в файле стилей.

1.3.6 ^18.05.2013

• Исправлено: при открытии селекта другие не закрывались.
• Изменено: удалено свойство float: left у тега div.jq-selectbox__select за ненадобностью.
• Изменено: класс .jq-selectbox__text переименован в .jq-selectbox__select-text.

1.3.5 ^01.05.2013

• Исправлено: ошибка "Maximum recursion depth exceeded" при клике на неактивный чекбокс или радиокнопку.
• Исправлено: баг, связанный c ускорением прокрутки длинного выпадающего списка в селекте после неоднократно раскрытия/скрытия выпадающего списка.
• Изменено: названия некоторых классов заменены на более уникальные.

1.3.4 ^03.03.2013

• Исправлено: не работало выделение в мультиселекте в Internet Explorer 8-й и ниже версиях.

1.3.3 ^08.02.2013

• Добавлена опция, позволяющая отключать умное позиционирование для выпадающего списка селекта (чтобы он раскрывался всегда вниз).
• Изменен способ скрытия оригинальной радиокнопки (ранее при отсутствии фона у родителя ее было видно).
• Исправлено: в некоторых случаях с псевдо-радиокнопки не снималось отмеченное состояние.

1.3.2 ^27.01.2013

• Добавлено: переключение селекта с клавиатуры.
• Добавлено: прокрутка до 1-го выбранного пункта в мультиселекте.
• Добавлено: в псевдоэлементы теперь передаются все data-* атрибуты, указанные у оригинальных элементов.
• Исправлено: если в одиночном селекте нет пунктов с атрибутом selected, то к первому <li> не добавлялся класс .selected.
• Изменено: к атрибуту id, передаваемому от стилизуемого элемента, теперь добавляется суффикс (можно указать свой через опцию).
• Изменено: уменьшен z-index по умолчанию для одиночного селекта.

1.3.1 ^23.01.2013

• Внесены изменения, необходимые для корректной работы плагина с jQuery 1.9.
• Исправлена ошибка, связанная с неправильной работой динамического изменения селектов.

1.3 ^17.01.2013

• Реализована поддержка тега <optgroup> в селекте.

1.2.5 ^15.01.2013

• Изменен способ эмуляции <input type="file">, что позволило избавиться от двух далее описанных багов в Firefox и IE.
• Изменены названия CSS-классов у псевдоэлементов на более уникальные (соответственно, файл jquery.formstyler.css изменен).
• Изменено: опция zIndex переименована в singleSelectzIndex.
• Исправлено: в браузере Firefox обрабатывался клик по <input type="file"> в состоянии disabled.
• Исправлено: в браузере Internet Explorer динамически измененный <input type="file"> не передавал файл на сервер.
• Исправлено: у простого селекта теперь убирается фокус при переключении Tab'ом на другой элемент формы.
• Добавлено: поддержка фокуса для <input type="file"> при нажатии на Tab.
• Добавлено: к родительскому тегу простого селекта добавляется класс .opened при раскрытии выпадающего списка.
• Добавлено: CSS-классы, указанные для <option> передаются тегу <li> в псевдоселекте.
• Добавлено: новая опция selectVisibleOptions для селекта (см. описание выше в статье).

1.2.2 ^14.01.2013

• Исправлен баг в Firefox: если у первого пункта селекта стоял атрибут selected, то при выборе любого другого пункта передавалось значение первого.

1.2.1 ^09.01.2013

• Псевдоэлементам теперь передаются те же идентификаторы и классы, которые указаны для стилизуемых элементов форм.
• При прокрутке списка одиночного селекта страница теперь не прокручивается (ранее это работало только для мультиселекта).
• При открытии селекта с длинным списком теперь сразу виден выбранный пункт (ранее его могло быть не видно, и приходилось прокручивать список, чтобы его найти).

1.2 ^26.11.2012

• Добавлена поддержка атрибута multiple для тега <select>.
• Добавлена поддержка атрибута disabled для тега <input type="file">.

1.1.3 ^20.11.2012

• Решена возникающая в ряде случаев проблема с селектом в браузере Firefox при использовании атрибута selected.

1.1.2 ^15.10.2012

• Плагин теперь реагирует на применение метода change у тега <input type="radio">.
• Добавлена опция zIndex.

1.1 ^13.10.2012

• Добавлена поддержка атрибута disabled для тега <select>.

1.0 ^09.10.2012

• Первая версия плагина.