Бресту 1000 лет
Программы
Музыка
Игры
Заработок и Раскрутка
GPS навигация
» » Плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Информация к новости
  • Просмотров: 266
  • Автор: hazardcd
  • Дата: 20-04-2019, 22:03
  • Не нравится
  • 0
  • Нравится
20-04-2019, 22:03

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

Категория: Вебмастер / Скрипты, Коды / Формы

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

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

Достоинства

  • Общее:


    • Простота оформления с помощью CSS.
    • При отключенном jаvascript отображаются стандартные элементы форм, т.е. их работоспособность не теряется.
    • Псевдоэлементы выводятся внутристрочно, т.е. повторяют свойство стандартных элементов.
    • Поддержка работы с динамически добавляемыми/изменяемыми элементами.
    • Поддержка атрибутов 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 не ниже версии 1.7.0.

  1. Подключите jQuery (если он еще не подключен), плагин и стили к нему, добавив следующие строки перед тегом </head>:

    <link href="путь_к_файлу/jquery.formstyler.css" rel="stylesheet" />
    <link href="путь_к_файлу/jquery.formstyler.theme.css" rel="stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="путь_к_файлу/jquery.formstyler.min.js"></script>
    

    Файл jquery.formstyler.css — это обязательные стили, необходимые для корректной работы плагина, а jquery.formstyler.theme.css — визуальное оформление элементов форм.

  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-атрибут
idSuffix -styler суффикс к атрибуту id, передаваемому от стилизуемого элемента
filePlaceholder Файл не выбран текст по умолчанию в поле выбора файла (когда файл не выбран) data-placeholder
fileBrowse Обзор... текст кнопки у поля для выбора файла data-browse
fileNumber Выбрано файлов: %s текст после выбора нескольких файлов, вместо %s вставится число data-number
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
selectSmartPositioning true умное позиционирование для выпадающего списка селекта:
true — работает вверх и вниз
false — работает только вниз
'-1' — позиционирование отключено
data-smart-positioning
locale ru текущая локаль
locales английская локализация массив локалей с переводом соответствующих опций, подробнее смотрите здесь
к содержанию ↑

Колбеки (callbacks)

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

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

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

Локализация

Плагин поддерживает многоязычность. Для этого используются опции locale и locales.

Пример локализации (английская по умолчанию включена в плагин):

[code]$('input, select').styler({ locale: 'en', locales: { 'en': { filePlaceholder: 'No file selected', fileBrowse: 'Browse...', fileNumber: 'Selected files: %s', selectPlaceholder: 'Select...', selectSearchNotFound: 'No matches found', selectSearchPlaceholder: 'Search...' } }, });

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 класс, используемый для стилизации текстовых полей и кнопок (работает независимо от плагина)

  

ДЕМО

Скачать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
HTML-cсылка:
BB-cсылка:
Прямая ссылка:

Добавление комментария

Имя:*
E-Mail:
Комментарий:
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Подтвердите что вы не робот: *

PaidVerts
^
 
Рейтинг@Mail.ru Траст. Анализ сайта hi-cd.ru Goon Каталог сайтов Positive SSL