Главная 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. $('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, а не текст из него?

  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"
    А то оно сильно по разному выглядит в разных браузерах, и почти во всех — ужасно ;)

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