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 607)

  1. Выложил новую версию — 1.5.3.3.

    • Я недавно начал изучать JQuery и возможно задам ужасно чайниковский вопрос, но тем не менее: У меня есть код, но нигде в коде не встречается активация плагина, но все select автоматически становятся оформленными вашим скриптом. Никак не пойму где и что его активирует? Этого кода нету точно нигде:

      <script>  
      (function($) {  
      $(function() {  
        
        $('input, select').styler();  
        
      })  
      })(jQuery)  
      </script> 
    • Спасибо , за полезный плагин, очень полезная штука. Единственное замечание, в css некоторые свойства написать бы через префиксы, чтобы обеспечить кроссбраузерность, было бы отлично. А так все СУПЕР!!

  2. скрипт не обрабатывает стили радио, возможно и других (не тестировал)

  3. после версии 1.5.1

    перестал работать код

        $('#search_form select').change(function(){
            $('#search_form').submit();
        });
  4. Андрей
    6 лет назад

    Скажите пожалуйста, как заставить список всплывать в верх, а то его обрезает overflow: hidden; убрать его не получиться, нужно чтобы он верх всплывал????

  5. а как сделать reset формы?? при использовании $(‘form’)[0].reset(); выбранные селекты остаются как были

  6. да и ещё как изменить значение селекта путём js, как это делается обычно:
    $(«#my_select :contains(‘two’)»).attr(«selected», «selected»);

  7. Александр
    6 лет назад

    При клике на сам селект не отрабатывается событие onSelectClosed

  8. Здравствуйте, у меня вопрос по одиночному селекту.

    Как я понял селект состоит из 2 списков: select и ul. И при загрузке из БД значения полей li и option одинаковые. Поэтому при выборе определенного значения оно в БД прекрасно обновляется.

    Но если селект заполняется данными из AJAX-ответа, который меняет значения в UL, в БД новое значение не летит, т.к. оно берется из тега select, а значения в нем не меняются.

    Подскажите, пожалуйста, как изменить значения в select на такие же как в UL?

    • Через AJAX нужно менять select, а не UL. UL создается плагином, поэтому не нужно его трогать.

      • При получения AJAX-ответа в select у меня пропадают стили этого списка.
        Всего у меня два списка — один с регионами, другой с городами. При выборе из первого списка региона, подгружаются во второй список его города, но уже без стилей оформления. Подскажите, как правильно сделать вывод?

        • После завершения AJAX-запроса запускайте .trigger('refresh') или .styler() для измененного селекта.

          • Куда я только не вставлял .trigger(‘refresh’) ни чего не выходит.
            Посмотрите мой код, может не так запускаю.

            
            (function(){
            
                        $(".custom_select_region li").click(function(){
                            
                        var val = $(".select_r :selected").val();
                        
                         //показ блока с вращающимся изображением
                        $(".load").fadeIn(300);
            //            //применяем аякс и отправляем массив идентификаторов методом ПОСТ в файл-обработчик
                        $.ajax({
                              url: '/account/profile',
                                type: 'POST',
                               data: {region:val},
                               error: function(){
                                       //если ошибка то показываем блок  с соответстующим сообщением
                                       $(".load").fadeOut(200);
                              },
                              //если все хорошо
                              success: function(html){
                                       //плавно скрываем вращающиеся изображение
                                       $(".load").fadeOut(200,function () {
                                               //проверяем что вернулось нам в качестве ответа
                                               if(html) {
                                               
                                                        $(".city_region").html(html);
                                                       
                                              }
                                       });	
                              }
                              }).trigger('refresh');
                        });
            
                    })();
            
            • Да, неправильно запускаете. Нужно после этой строки:

              $(".city_region").html(html);
              • Пробовал и после этой строки так:

                $(«.city_region»).html(html).trigger(‘refresh’);

                ни чего не получается.

                Не создается список UL, к которому применяются стили.

                В AJAX-ответ (в html) у меня идет вот это, правильно?:
                echo («»);
                foreach($city_arr as $key => $item){
                printf(«%s», $key, $item);
                };
                echo («Другой город, населенный пункт»);
                echo(«»);
                exit();
                Все это помещается в div с классом city_region.

  9. Андрей
    6 лет назад

    Вопрос в следующем: Селект с плагином jQuery Validation, делаю следующим образом

    
    $(document).ready(function() {
    	$("#add-ads").validate({
    	invalidHandler: function() {
    		setTimeout(function() {
    			$('select').trigger('refresh');
    		}, 1)
    	},
    		errorLabelContainer: $(".has-error"),
    		errorElement: "span"
    	});
    });
    

    Потом вот так:

    
        if($('select').length){
            $('select').styler({
            	selectSearch:	false,
    		    onSelectClosed: function() {   
    		      $(this).trigger('refresh');
    		    }
            });
        }
    

    Но динамическое обновление классов не срабатывает, но иногда срабатывает и получается путаница, вроде должен быть класс valid, а подставляется класс error. Как заставить селект менять классы на лету, как это делается без плагина стилизации?

  10. А я вот никак не могу понять как нужно делать, что бы input:file показывал имя файла после его выбора.

    <div class="jq-file">
    							<div class="jq-file__name">Файл не выбран<div class="jq-file changed"></div></div>
    							<div class="jq-file__browse">Обзор...</div>
    							<input type="file">
    						</div>

    это html, css подключен, jquery потом и скрипт ваш подключен перед закрытием тега body.

    • скорее вот так, тот блок я добавил, думал сработает а теперь вижу, что класс динамически присвоивается инпуту, а у меня нет.

      <div class="jq-file">
      							<div class="jq-file__name">Файл не выбран</div>
      							<div class="jq-file__browse">Обзор...</div>
      							<input type="file">
      						</div>
      • Посмотрите страницу с примерами, там имя файла отображается после выбора. Если у вас это не работает, покажите вашу страницу с проблемой.

  11. Страница у меня в денвере еще.. Единственное что я поменял, это .jq-file добавил position: relative; так как без него у меня input растягивается на всю ширину и высоту браузера, покрывая все собою.
    Вот стили input

    <input type="file" style="position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; opacity: 0; margin: 0px; padding: 0px;">

    так и должно быть?

  12. Ксения
    6 лет назад

    Здравствуйте! Хотела попользоваться Вашим плагином в своих динамических списках, они формируются через ajax, используя базы данных. Но столкнулась с проблемой! Не могу понять куда необходимо вставлять .trigger(‘refresh’); Сделала вот так, но появляются два селекта: один стилизованный, но пустой, второй стандартный, но с необходимыми позициями.

    
    var targetValue;
    var sel = document.getElementById("choose_printer");
    sel.onchange = function() {
        targetValue = sel.value;
    
    jQuery.get('/index.php/3d-printers/3d-printing-services.html?targetValue=' + targetValue, function( a )
    {
    
     jQuery('#choose_material').remove();
    
    jQuery('#material').append(jQuery(a).find('#choose_material'));
       jQuery('choose_material').styler;   
    });
    
    };
    

    Подскажите, пожалуйста, что я делаю не так?

  13. Александр
    6 лет назад

    Доброго времени суток, интересует такой момент.
    Добавляю селекту и диву, в который он оборачивается

    width:200px

    После чего вижу, что область выбора — стала размером 200px, так же как и все выпадающие элементы в нем. Хотя в живом примере не увидел ничего, кроме стиля css. Подскажите что делаю не так.
    Нужно, чтобы поле было 200px, а выпадающие — по ширине самого большого пункта.

    И еще 1 момент.

    styler({selectSmartPositioning:true,selectSearch:false, selectVisibleOptions:7})

    В такой записи. все работает нормально, но если убираю умное позиционирование (falce), то скролл по элементам теряется… Необходимо, чтобы выпадал список ВСЕГДА вниз.
    Подскажите что делать надо, пожалуйста)

    • Нужно, чтобы поле было 200px, а выпадающие — по ширине самого большого пункта.

      Достаточно указать:

      .jq-selectbox {
      	width: 200px;
      }

      На странице примеров 3-й селект именно так и сделан.

      В такой записи. все работает нормально, но если убираю умное позиционирование (falce), то скролл по элементам теряется… Необходимо, чтобы выпадал список ВСЕГДА вниз.

      Это баг. Буду исправлять.

      • Закоментил умное позиционирование — полет нормальный.
        Нашел ошибку у себя. у родительского блока был overflow:hidden. Вот все и не влезало)

        Спасибо. кстати. Есть 1 небольшое пожелание — сделать, чтобы скрипт изменял еще и стрелку (переворачивал), когда список открыт и обратно

  14. Неплохой плагин, но только есть хороший лично для меня минус.
    Если выпадающий список открыли то срабатывает event — onSelectOpened, но если пользователь закрыл список просто кликнув на любой другой элемент на страницу то событие onSelectClosed не срабатывает. Также проблемы с .opened когда пользователь открывает список, класс почему-то не добавляется.

    • Что-то у тебя походу глюки со скриптом. все работает, что ты описал.

      
      // прячем выпадающий список при клике за пределами селекта
      								$(document).on('click', function(e) {
      									// e.target.nodeName != 'OPTION' - добавлено для обхода бага в Opera на движке Presto
      									// (при изменении селекта с клавиатуры срабатывает событие onclick)
      									if (!$(e.target).parents().hasClass('jq-selectbox') &amp;&amp; e.target.nodeName != 'OPTION') {
      
      										// колбек при закрытии селекта
      										if ($('div.jq-selectbox').filter('.opened').length) {
      											opt.onSelectClosed.call($('div.jq-selectbox').filter('.opened'));
      										}
      
      										if (search.length) search.val('').keyup();
      										dropdown.hide().find('li.sel').addClass('selected');
      										selectbox.removeClass('focused opened');
      
      									}
      								});
    • Данные проблемы наблюдаются только в Internet Explorer, буду разбираться.

      • Если чем-то помогу — Я проверил в 9ом ИЕ, полет нормальный, если клацать по стрелке. А если клацать по самому селекту, то беда. да — «не выпадает» список

  15. Выложил новую версию плагина — 1.5.4.

  16. http://toolfind.ru/toolfindsearch/?template=new&result_new=Y#

    На радио кнопки посмотрите. http://joxi.ru/XOvCU4wyTJDkBqtKw84

  17. После обновления до версии 1.5.4. в Ие 9-10 такая вот лабуда, при нажатии на сам селект.
    Баг с закрыванием исправлен, как и обещалось =)
    А вот тут — не ясно(
    http://joxi.ru/c8rEU4wyTJDuBqAhFYc

  18. Обновился еще раз — вижу обратный баг. Когда жму на стрелку в ИЕ 9,10 все ок, кроме закрывания списка. А когда жму на селект — список закрывается, при нажатии в любом месте экрана.
    Что тоже странно(
    От чего вообще может зависеть это? оборачивающие дивы?
    http://joxi.ru/zdjEUxjKTJD4Veq6sqk

  19. Подскажите, как можно очистить значение input типа file/
    Спасибо за помощь

  20. Подскажите, пожалуйста, можно ли сделать так, чтобы при выборе файла — .jq-file__name не подставлял другой текст. а оставался всегда тот, что указан в filePlaceholder??? Очень нужно

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