Главная 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. Выложил новую версию — 1.5.3.3.

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

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

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

        $('#search_form select').change(function(){
            $('#search_form').submit();
        });
  4. Скажите пожалуйста, как заставить список всплывать в верх, а то его обрезает overflow: hidden; убрать его не получиться, нужно чтобы он верх всплывал???

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

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

  7. При клике на сам селект не отрабатывается событие 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');
                        });
            
                    })();
            
  9. Вопрос в следующем: Селект с плагином 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. Здравствуйте! Хотела попользоваться Вашим плагином в своих динамических списках, они формируются через 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. Доброго времени суток, интересует такой момент.
    Добавляю селекту и диву, в который он оборачивается

    width:200px

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

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

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

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

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

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

      .jq-selectbox {
      	width: 200px;
      }

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

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

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

  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. После обновления до версии 1.5.4. в Ие 9−10 такая вот лабуда, при нажатии на сам селект.
    Баг с закрыванием исправлен, как и обещалось =)
    А вот тут — не ясно (
    joxi.ru/c8rEU4wyTJDuBqAhFYc

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

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

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

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