Главная JavaScript

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>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...

Комментарии (2 614)

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

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

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

    $('select').styler({
      onSelectClosed: function() {
        $(this).find('select').trigger('change');
      }
    });
    
  4. При ините на несколько радио кнопок с одинаковым неймом разрешает чекнуть все инпуты одновременно…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    <option hidden="hidden">

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

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

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

  19. Здравствуйте.
    При стилизации плагином динамических 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. Пожалуйста, подскажите, что дает такая конструкция:

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

    });
    })(jQuery)

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

    $(function () {});

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

Ваш комментарий