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

  1. $(‘body’).on(‘click’, ‘.jq-checkbox’, function(){
    console.log(this)
    })

    не подскажешь почему ничего не происходит?

  2. $(select).val(newVal);
    Не могу заставить работать такую конструкцию. Она работает на стилизованных селектах?

  3. теперь всегда разворачиваются вверх, независимо от кол-ва пунктов.
    В большинстве случаях мне подошло такое решение

    $(‘select’).styler({
    selectSmartPositioning: true,
    onSelectOpened: function(){
    if($(this).find(‘select’).hasClass(‘top’)){
    var selectTop = $(this).find(‘.jq-selectbox__dropdown’).height();
    $(this).find(‘.jq-selectbox__dropdown’).css(‘top’, -selectTop + ‘px’);
    }
    }
    });

  4. у Вашем плагине не работает селект на мобилках, можно посмотреть к примеру в емуляторе хрома, а раньше работал

  5. Есть одна беда, когда пытаешься стрелочками:
    ReferenceError: liHeight is not defined

  6. Добрый день.

    Подскажите пожалуйста, как быть в ситуации когда динамических селектов два.
    Пример: ТИП, ПРОИЗВОДИТЕЛЬ, МАРКА. Производитель зависит от Типа, Марка зависит от производителя.
    При инициализации все три селекта стилизуются.
    Попытки отложенной стилизации у меня не увенчались успехом.

    Если меняем “Марку”, марка стилизуется, модель – НЕТ.
    Меняем ТИП, марка и модель не стилизуются.

    В JQuery не силен. Буду признателен за кусок кода как пример, который внимательно изучу и опробую.

    Спасибо.

  7. Забыл сказать, что пишу на Drupal свой модуль, в котором форма с динамическим содержимом обновляется через AJAX.
    Нашел в комментариях :
    jQuery.ajaxSetup({complete: function(){jQuery(“select”).styler(); }});

    Где это прописать ?
    Спасибо.

  8. Выложил новую версию плагина – 1.7.

  9. Во вчерашней версии селект открывается вверх. Как сделать чтобы он открывался вниз?
    Благодарю.

  10. как раскрыть селект на hover() ?

  11. Не подскажете как можно сделать перевод для селекта?
    Вот по типу colorbox.

        $.extend($.colorbox.settings, {
            current: "Billede {current} af {total}",
            previous: "Forrige",
        });
  12. Здравствуйте, у меня такой вопрос, долго стилизуется select в котором option-ов около 1300, что можно сделать?

  13. При подгрузке полей через ajax выбранный option не выбирается плагином, если посмотреть в исходном коде
    выбрано значение 1, а плагин не отобразил выбранный value

    Объект *
    Пункт 0
    Пункт 1
    Пункт 2
    Пункт 3

    Объект *
    Пункт 0
    Пункт 1
    Пункт 2
    Пункт 3

    Подскажите как можно это исправить?

  14. Как получить value из оригинального option’a, а не текст из него?

    • Это особенность select’а и jquery Вам нужно все option заполнять value

      
          <select>
              <option value="1">Пункт 1<option>
              <option value="2">Пункт 2<option>
          </select>
      

      И как было прокомментировано

      $('select').val();
      • На самом деле это был глупый вопрос, так как я не уследил, и после value знак = не поставил, поэтому он мне и выдавал не то что нужно.
        Кстати может кому пригодится, вместо того чтобы глобальные настройки ajax’a использовать, проще сделать так:

        
        $(document).ajaxComplete(function() {
            $('select').styler();
        });
        
  15. Как использовать метод $(‘select’).styler(‘destroy’); к одному определенному элементу селекта?

  16. Никак не получается отловить событие клика
    $(‘body’).on(‘click’, ‘#Check-styler’, function(e) {

    var el = $(this).children(“input”);

    if(el.attr(‘checked’) == “checked”){
    el.removeAttr(‘checked’).trigger(‘refresh’);
    }else{
    el.attr(‘checked’, ‘checked’).trigger(‘refresh’);
    }
    e.preventDefault();
    });

  17. Подскажите как из Select удалить все элементы?

  18. Не работает на Ipad и Iphone. Событие клик происходит, но дальше – нет. Не подскажете в чем может быть причина? на android все хорошо.

  19. Можете подсказать, при выборе из формы не передается значение select.Вы упоминали что необходимо click заменить на change. У меня никак не заработает, сам слабо очень разбираюсь в js

    
    <div class="fabric">				
    <select class="typefabric" name="typefabric">
    <option disabled selected="selected">Не выбрано</option>
    <option value="значение 1">значение 1  </option>
    <option value="значение 2">значение 2</option>
    <option value="значение 3">значение 3</option>
    </select>
    </div>	
    
    $name = htmlspecialchars($_POST['name']);
    $phone = htmlspecialchars($_POST['phone']);
    $typefabric = htmlspecialchars($_POST['typefabric']);
    
    if(!$name &amp;&amp; !$phone) {
    	echo 'all_input';
    }elseif (strlen($name) <= 4) {
    	echo 'name';
    }elseif (strlen($phone) <= 7) {
    	echo 'phone';
    }else{	
    
    $send =  get_option('admin_email');
    $email = 'email@'.$_SERVER['HTTP_HOST'];
    
    $sitename = get_option('blogname');
    $subject = 'Обратная связь - '.$sitename;
    $msg=
    'Имя: '.$name.'
    Телефона: '.$phone.'
    Тип ткани: '.$typefabric.'
    ';
    mail($send, $subject, $msg, "From: ".$name." <".$email.">");
    echo 'ok';			
    }
    
    $(".order-call-form .submit").click(function() {
    	        $.post("/form/callback.php", { name:$('.order-call-form .name').val(),phone:$('.order-call-form .phone').val() ,typefabric:$('.typefabric').val(),rand:Math.random() } ,function(data) {
    			$(".order-call-form input").removeClass("border-form-error");
    			
    			if(data=='ok') {
    				 $(".order-call-form .order-compleate").show();
    				 $(".order-call-form input").removeClass("border-form-error");
    				}
    				
    				if(data=='all_input') {
    				 $(".order-call-form input").addClass("border-form-error");
    				}
    			
    				if(data=='name') {
    				 $(".order-call-form input.name").addClass("border-form-error");
    				}
    				 
    				if(data=='phone') {
    				 $(".order-call-form input.phone").addClass("border-form-error");
    				}
    				if(data=='typefabric') {
    				 $(".order-call-form input.typefabric").addClass("border-form-error");
    				}
    			});
    			return false;// отмена отправки формы (действие по умолчанию)
    	});
    
  20. Скажите, а планируется-ли стилизовать поле input type=”number”
    А то оно сильно по разному выглядит в разных браузерах, и почти во всех – ужасно ;)

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