+7 843236-6001

Казань

+7 499550-6001

Москва

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

Статьи

03.07.2015
jquery.formstyler.png

В данном плагине я объединил 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.

  1. Подключите 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>
    
  2. Для активации плагина примените метод .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-атрибут
wrapperformобертка стилизуемых элементов
idSuffix-stylerсуффикс к атрибуту id, передаваемому от стилизуемого элемента
filePlaceholderФайл не выбрантекст по умолчанию в поле выбора файла (когда файл не выбран)data-placeholder
fileBrowseОбзор...текст кнопки у поля для выбора файлаdata-browse
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() {}запускается после выполнения плагина

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

(function($) {
$(function() {

  $('input, select').styler({
    fileBrowse: 'Выбрать',
    singleSelectzIndex: '999',
    onSelectOpened: function() {
      // к открытому селекту добавляется красная обводка
      $(this).css('outline', '3px solid red');
    }
  });

})
})(jQuery)

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

Находится здесь.


Возврат к списку


0
Гость
[URL=http://www.christian-louboutinsreplicas.com/]replica christian louboutin heels[/URL] are done with[URL=http://www.giuseppezanottis.cc/]giuseppe zanotti shoes[/URL] any fastidious [URL=http://www.giuseppezanottis.cc/]giuseppe zanotti[/URL]fervour and much much more girls have [URL=http://www.giuseppezanottis.cc/]Giuseppe Zanotti Sneakers outlet[/URL] for pursuing the most uptodate point. [URL=http://www.christian-louboutinsreplicas.com/christian-louboutin-asteroid-160mm-leather-pumps-pink-p-888.html]Christian Louboutin Asteroid[/URL] I order my boots or shoes internet[URL=http://www.moncleroutletnyc.com/]Moncler CLEARANCE [/URL]and usually pay the full[URL=http://www.christian-louboutinsreplicas.com/]christian louboutin replica [/URL]price merely of times, if this. No matter[URL=http://www.moncleroutletnyc.com/]piumini moncler [/URL]you are usually rich or not, [URL=http://www.christian-louboutinsreplicas.com/christian-louboutin-pigalle-100-studded-pumps-p-149.html]christian louboutin studded pumps[/URL]you deserve to own the most beneficial shoes on your legs. [URL=http://www.christian-louboutinsreplicas.com/]christian louboutin knockoffs[/URL]are a symbol of feminism as well as style It accomplishs them feel that[URL=http://www.christian-louboutinsreplicas.com/]fake christian louboutin[/URL] there is unblueprintered area and they can get there with or after any advice.[URL=http://www.moncleroutletnyc.com/]moncler outlet online store [/URL]It acquiesces them to[URL=http://www.moncleroutletnyc.com/]moncler factory outlet[/URL], aplomb,[URL=http://www.giuseppezanottis.cc/]Giuseppe Zanotti Sneakers online[/URL]which all can be absolut[URL=http://www.marlboros.cc/]Buy Marlboro cigarettes[/URL] baleful combinations if put calm.The[URL=http://www.christian-louboutinsreplicas.com/]Christian Louboutin[/URL] accomplish them apperceive that low and catch[URL=http://www.christian-louboutinsreplicas.com/]christian louboutin spiked heels[/URL] they can accept admission[URL=http://www.marlboros.cc/]Buy Marlboro cigarettes online[/URL] to the apple[URL=http://www.marlboros.cc/]marlboro cigarettes[/URL] of the advantaged few. The few [URL=http://www.giuseppezanottis.cc/]Giuseppe Zanotti sale[/URL] can acquiesce the actual[URL=http://www.marlboros.cc/]marlboro outlet[/URL] best in the apple after an eye[URL=http://www.giuseppezanottis.cc/]Giuseppe Zanotti Boots[/URL] on the bulk that they are[URL=http://www.christian-louboutinsreplicas.com/]christian louboutin glitter pumps[/URL] shoes acquiesce the women to breach the bottle[URL=http://www.giuseppezanottis.cc/]giuseppe zanotti outlet[/URL] barrier that exists amidst women and all of them are[URL=http://www.moncleroutletnyc.com/]Moncler doudoune[/URL] affiliated in the [URL=http://www.christian-louboutinsreplicas.com/christian-louboutin-highness-160mm-aurora-colorful-pumps-p-918.html]Christian Louboutin Highness 160mm Aurora Colorful Pumps[/URL]sisterly awning of shoes from[URL=http://www.giuseppezanottis.cc/nicholas-kirkwood-c-16.html]Nicholas Kirkwood shoes [/URL]this cast. It goes on to blast stereotypes and[URL=http://www.giuseppezanottis.net/]giuseppe zanotti[/URL]about the affluent [URL=http://www.christian-louboutinsreplicas.com/]christian louboutin stores[/URL]the affluent activity [URL=http://www.moncleroutletnyc.com/]moncler outlet store[/URL]that these shoes get you abide the aforementioned. If you accept both[URL=http://www.moncleroutletnyc.com/] moncler outlet online[/URL] and a austere drive to[URL=http://www.giuseppezanottis.cc/]Giuseppe Zanotti Sneakers[/URL], you will be[URL=http://www.christian-louboutinsreplicas.com/]christian louboutin heels[/URL]. acceptable luck and[URL=http://www.christian-louboutinsreplicas.com/]replica christian louboutin pumps[/URL] adulation to buy all appearance admissionories and now with the advanced [URL=http://valentinoreplica.org/]valentino shoes[/URL] design of gladiator style sling backs[URL=http://www.giuseppezanottis.cc/]Giuseppe Zanotti online[/URL]and the vertical and horizontal straps on your feet will interlace their amazing mesh and [URL=http://www.giuseppezanottis.cc/]Giuseppe Zanotti Sneakers[/URL]design on your feet. This is one pair that is [URL=http://www.christian-louboutinsreplicas.com/]replica louboutin pumps[/URL] the very best[URL=http://www.christian-louboutinsreplicas.com/]christian louboutin glitter heels[/URL] of shoes. [URL=http://www.giuseppezanottis.net/]Giuseppe Zanotti Sneakers [/URL]A great place to[URL=http://www.moncleroutletnyc.com/]moncler replica [/URL]shop for these gorgeous shoes or [URL=http://www.christian-louboutinsreplicas.com/christian-louboutin-dafsling-glittery-leather-slingback-platform-p-897.html]Christian Louboutin Dafsling Glittery Leather Slingback Platform[/URL]. Shopping online will save you up to [URL=http://www.christian-louboutinsreplicas.com/]christian louboutin narcissus pumps[/URL] latest styles.[URL=http://www.christian-louboutinsreplicas.com/]replica christian louboutin[/URL]A great place to find his and other[URL=http://www.giuseppezanottis.net/]Giuseppe Zanotti Wedge Sneakers[/URL] famous[URL=http://www.christian-louboutinsreplicas.com/]replica louboutin shoes[/URL] is through eBay online auctions. You can find great [URL=http://valentinoreplica.org/]valentino replica[/URL]buys and save big[URL=http://valentinoreplica.org/]valentino outlet[/URL]. For instance, the Marpoil wedge can be bought online for less than [URL=http://www.christian-louboutinsreplicas.com/]christian louboutin daffodil pumps[/URL]the Paris Stiletto boot. Also, found online for less than .[URL=http://www.giuseppezanottis.net/]Giuseppe Zanotti Boots[/URL] Look for the Very Prive pump online for .These and so many other [URL=http://www.christian-louboutinsreplicas.com/christian-louboutin-isolde-20ans-specchio-laminato-black-p-898.html]Christian Louboutin Isolde 20ans Specchio Laminato Black[/URL] That's a huge savings.[URL=http://www.valentinosoutlet.cc/]valentino outlet[/URL] For the price conscience that should sound like music to your ears. If you want to look good then[URL=http://www.giuseppezanottis.cc/]http://www.giuseppezanottis.cc[/URL].
Имя Цитировать 0
Текст сообщения*
Защита от автоматических сообщений
Облако тегов
API array CSS facebook IT-биографии JavaScript jQuery Microsoft microsoft MySQL PC php seo SQL ssl twitter апокалипсис баг база данных бизнес битрикс Битрикс браузер веб-ресурс векторная графика графика дизайн единорог жены программистов звук ЗОЖ инстаграмм интернет-магазин инфографика искусство истории ит картинки клиент компьютер конец света конференция кроссбраузерность лень массивы метод Верле музыка мысли мышь объявления ОС отдых отцы и дети парнас ай ти парнас айти передача данных подростки посмеяться правописание причины лени программирование программист продвижение проект размер страницы разметка разработка разработка интернет-магазина разработчик веб-систем распознавание звука реклама русский язык сайт семантическая разметка семинар сертификат сисадмин скорость загрузки сайта слушать создание сортировка социальные сети творчество тестирование умные мысли цитаты яндекс
Последние комментарии