Настройка библиотеки стилизации селектов

Пример использования в шаблоне index.tpl:

<script src="js/jquery3/jquery.formstyler.min.js"></script>
<script>
$(document).ready(function() {
   {if $module != 'MainView'}
      $('.showselect').styler({ selectSearch: true });
   {else}
      $('.showselect').styler();
   {/if}
});
</script>

Опции:

ОпцияПо умолчаниюОписание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 английская локализация массив локалей с переводом соответствующих опций

Если есть необходимость отвязать плагин от стилизованного элемента, то задействуйте метод destroy:

$('select').styler('destroy');

Динамическое изменение:

При динамическом изменении элементов формы необходимо запустить триггер refresh, например:

$('button').click(function(e) { e.preventDefault(); /* делаем чекбокс неактивным */ $('input:checkbox').attr('disabled', true) /* обновляем состояние псевдочекбокса */ .trigger('refresh'); });

При использовании сторонних плагинов, которые меняют атрибуты элементов формы, событие .trigger('refresh') необходимо запускать, используя setTimeout, иначе состояния псевдоэлементов не изменится. Пример с вышеуказанным плагином:

$('form').validate({ invalidHandler: function() { setTimeout(function() { $('input, select').trigger('refresh'); }, 1) } });

Колбеки (callbacks):

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

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

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

UPD: обновлено 09.05.2023

Еще нет своего сайта? Запустите интернет-магазин на платформе 5CMS - Все для продаж уже внутри!

Рекомендуем прочитать