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

jQuery Form Styler — плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)

Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Содержание: Демонстрация работы плагина Достоинства Недостатки Скачать Подключение плагина Отключение плагина (метод destroy) ...

Полезные комментарии (10)
Комментарии (2 430)
  1. 1
    Александр

    Прекрасный плагин, единственное не хватает в select множественного выбора без shift то есть галочками как на Avito например

  2. 3
    Валерий

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

  3. 5
    Максим

    Возможно ли производить какое-либо действие при выборе даже активного пункта меню? Сейчас сделал через колбэк закрытия, но это работает, если кликнуть не пункт меню, а на странице вне, что неправильно, так как по сути ничего не выбирали повторно

    $('select').styler({
     onSelectClosed: function() {
     $(this).find('select').trigger('change');
     }
    });
    
  4. 7
    Илья

    При ините на несколько радио кнопок с одинаковым неймом разрешает чекнуть все инпуты одновременно…

  5. 9
    Кирилл

    Напиши пожалуйста гайд о том, как можно модифицировать ширину и высоту и цвет поменять…

  6. 10
    Василий

    Привет, Dimox. Спасибо за такой полезный плагин, использовал его неоднократно. Я хотел бы спросить, если вариант только для кастомизации селектов. Те же методы, классы, но с урезанным функционалом только для селектов?

  7. 12
    Алексей

    Скажите есть ли функция выбора всех чекбоксов на странице?

  8. 15
    Ян

    Огромное спасибо вам за публикацию. На своем проекте как раз необходимо применить стилизацию select ов. Возник вопрос. Я подключаю скрипт к сайту на drupal 7. В файле page—user—%.tpl.php перед вставил так

    <script>
     (function($) {
     $(function() {
    
     $('input, select, .form-select').styler();
    
     });
     })(jQuery);
    
    

    При перезагрузке страницы один select нормально изменился так как он с классом .form-select но
    теперь возникает проблема так как я использую модуль hierarchical_select и при клике на элемент select открывается еще один select и к нему уже не подключается скрипт и как бы оба селекта принимают стандартный вид.

    Можете подсказать как мне правильно подключить скрипт в таком случае?

  9. 17
    Анна

    В плагине нашлось много багов, один из них описан по ссылке: http://oliwlife.ru/works/libris/formstyler_bug/description.jpg
    Вот чистая демонстрация бага без сторонних стилей и js: http://oliwlife.ru/works/libris/formstyler_bug/

    Бывают и другие ситуации когда не выводит текст внутри бокса. Что очень печалит

    Если Вы решаете использовать ли этот плагин сначала проверьте исправлен ли этот баг. Если нет то лучше обойти плагин стороной!

    • 18
      Антон

      А в чем собственно баг? У меня указанная страница открывается нормально и всё отрабатывает как нужно. Если вы про последний селект так у него просто не указан класс «select» на который вы цепляетесь в скрипте.

      Вот чистая демонстрация бага без сторонних стилей и js: http://oliwlife.ru/works/libris/formstyler_bug/

      • 19
        Анна

        Я же описала его тут http://oliwlife.ru/works/libris/formstyler_bug/description.jpg
        Попробуйте откройте http://oliwlife.ru/works/libris/formstyler_bug/ потом перейдите на любую другую ссылку, а потом используя кнопку назад (к примеру в хроме) перейдите обратно на страницу http://oliwlife.ru/works/libris/formstyler_bug/. Это очень важно использовать кнопку «назад», так как именно при её использовании некоторые селекты пустые, какие именно у меня в описании рассказывается.

        Селект Я последний оставила для более ясной демонстрации бага.

  10. 20
    Александр

    Использую styler для select внутри дилогового окна JQuery UI.
    Инициализируется нормально, только при открытии окна объект выпадающего списка уезжает за горизонт события. Вверх с контейнера диалогового окна, да так, что только хвостик виден в верхней части диалога. Что-то вероятно происходит с позиционированием блока.
    Инициализация после открытия диалога и trigger не помогают. Не подскажете что может быть и как это обойти? И есть ли какие-либо особенности использования внутри диалогов?

  11. 21
    Никита

    Вопрос на миллион.
    Сайт вешается по-дикому если в селекте много пунктов (у меня в селекте города России ~700 пунктов). Даже на топовых банках браузер выкидывает сообщение, что «слишком долгая обработка, может до свидания?»

    Есть какой-то вариант решения проблемы?

  12. 25
    John_Go

    День добрый!
    Есть ли возможность реализовать в вашем плагине для пунктов селекта (и не только) вставлять произвольный html?
    Либо какой-нибудь другой способ в пункты селекта вставить иконки (например, при помощи иконочных шрифтов fontawesome). Часто требуется для полей сортировки и тп.

  13. 27

    Добрый день!
    Никак не могу понять почему у меня не срабатывает аттрибут selectSmartPositioning так, чтобы список выпадал только вниз. Он вообще у меня на всём сайте неправильно отрабатывает — только вверх во всех случаях независимо от расположения селекта.

  14. 29
    kiriw

    Не баг. Скорее недоработка.

    <div style="overflow-y:auto;height:20px">
    <select></select>
    </div>
    

    При таком раскладе, если блок раскрытого списка превышает видимую часть родителя, он уходит за скролл. При позиционировании fixed проблема решается, но пришлось немного лезть в код.

  15. 30
    igor

    Имеется ли возможность с select вытягивать события которые хранятся в options?

  16. 32
    Anrew

    Потребовалось в зависимости от выбора пользователя в одном select’е, прятать/показывать некоторые пункты в другом select’е. Но

    <option hidden="hidden">

    Игнорируется. Выводятся все пункты, даже спрятанные.

  17. 34

    У меня 2 проблемы, помогите пожалуйста http://joxi.ru/LmG31PbhRMVdwm :
    1. Не знаю почему, но никак не получается заставить выпадать список вниз — он всегда выпадает вверх, независимо от опций плагина и от положения на экране.
    2. Добавил элементу select класс, который ограничивает длину в 200px, но выбранный длинный текст некрасиво вылезает за рамки селекта.

  18. 38
    Просто чувак

    колбэк onFormStyled не вызывается после select.trigger(‘refresh’); то есть плагин срабатывает заново перестраивает все, но не запускает колбэк; Или так и должно? Пришлось везде где refresh есть копировать функцию из колбека…

  19. 41
    Александр

    Здравствуйте.
    При стилизации плагином динамических select`ов не работает зависимый select.
    При отключении плагина все работает.
    Как возможно решить данную проблему?
    Добавляет пункты в зависимый select след код:

    $('#category').change(function ()
    		{
    			$('#subcategory').find( 'option:not(:first)' )
    				.remove()
    				.end()		
    				$('#subcategory').prop( 'disabled',true );
    			var type_id=$(this).val();
    			
    			if(type_id==0){return;}
    			$.ajax({
    				type: "POST",
    				url: "{{ HOST }}/requests/index.php",
    				dataType: "json",
    				data: "a=subcategory-orders&amp;category=" + type_id,
    				error: function () {
    				 setTimeout(function () {
    				 $("#err_data").popup("open")
    				 }, 1000);
    				},
    				success: function(data){
    				 if(data.length>0)
    				 {
    					for ( var i = 0; i < data.length; i++ ) {
    						$('#subcategory').append('<option value="' + data[i].id_subcategory + '">' + data[i].name_subcategory + '</option>');
    					}
    					$('#subcategory').prop('disabled', false); 
    				 }
    				 else
    				 {
    				 $('#subcategory').prop('disabled', true); 
    				 }
    				}
    			});
    		 setTimeout(function () {
    		 $("#err_data").popup("close")
    		 }, 3000);
    		});
    
  20. 48
    Николай

    Пожалуйста, подскажите, что дает такая конструкция:

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

    });
    })(jQuery)

    ведь по идее можно было обойтись просто

    $(function() {});

    подразумевается что в анонимной функции будут использоваться переменные или это для чего-то другого?

  1. 1
    Роман

    Может кому пригодится, вот решение:

    if (!$(this).html().match(new RegExp('\^' + query, 'i'))) {
  2. 2

    Для тех, у кого обрезается текст в селектах при подключении нестандартных шрифтов, есть вот такое решение с отложенным запуском скрипта:

    setTimeout(function() { 
    	$('input, select').styler(); 
    }, 100)
    

    Буду признателен, если кто-то предложит более красивое решение.

  3. 3

    Можно.

    <select class="myselect">
    .jq-selectbox.myselect { 
     width: 250px; 
    }
    
  4. 4

    В общем, проблема была с angular.

    Имеем: калькулятор на angularjs, данные приходят, но селекты не открываются.
    Решение: Добавить setTimeout примерно как в пятом пункте, чтобы angularjs успел заполнить данными наши селекты :)

  5. 5
    <select class="select1">
    <select class="select2">
    
    .jq-selectbox.select1 {
    	width: 200px;
    }
    .jq-selectbox.select2 {
    	width: 300px;
    }
    
  6. 6
    Денис

    Может кому нибудь пригодится.
    Строка 530

    if (bottomOffset > (minHeight + searchHeight + 20) &amp;&amp; !el.hasClass("top")) {

    Тем селектам которые надо открывать вверх, добавляем класс «top».

  7. 7

    Можно. Вот решение:

    if (window.webkitURL) {
    	$('input[type="file"]').attr('title', ' ');
    } else {
    	$('input[type="file"]').attr('title', '');
    }
    
  8. 8
    Фарит
    @
    		(function($) {
     $(function() {
     var _dropdown;
     var settings = {autoReinitialise: true};
     $('input, select').styler({
     selectSearch: true,
     onFormStyled: function(){
     _dropdown = $('.jq-selectbox__dropdown');
     _dropdown.find('ul').wrap('<div class="scroll-pane" />');
     },
     onSelectOpened: function(){
     var _ul = $(this).find('.jq-selectbox__dropdown ul');
     var height = _ul.height();
     var _srollPane = _dropdown.find('.scroll-pane');
     _srollPane.height(height);
     _ul.css('max-height', 'none');
     _srollPane.jScrollPane(settings);
     }
     });
     });
     })(jQuery);
    	
    .scroll-pane
    {
     width: 100%;
     overflow: auto;
    }
    

    извините за code style, стилезуйте на свой вкус.

  9. 9
    neoxaker

    Более правильным вариантом решения проблемы с подключаемыми шрифтами была бы переинициализация плагина после окончания загрузки шрифта. Отловить загрузку шрифта можно при помощи гугловского скрипта «webfontloader» https://github.com/typekit/webfontloader . При подключенном плагине код переинициализации выглядел бы так:

    (function(){
     if (typeof WebFont != 'undefined') {
     WebFontConfig = {
     custom: {
     families: ['Arimo']
     },
     active: function() {
     $('select, :checkbox, :radio').trigger('refresh');
     }
     };
     WebFont.load(WebFontConfig);
     }
    })();
    

    В данном случае подключалось семейство шрифтов Arimo.

  10. 10

    В плагине это не предусмотрено. Можно сделать следующим образом:

    <label><input type="checkbox" /> Чекбокс</label>
    $('input:checkbox').change(function() {
    	if ($(this).is(':checked')) {
    		$(this).closest('label').addClass('checked');
    	} else {
    		$(this).closest('label').removeClass('checked');
    	}
    });
    
Ваш комментарий