Главная › JavaScript

jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей

2614 комментариев

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

Смотрите также

jQuery-плагин для стилизации input[type=

jQuery-плагин для стилизации input[type="radio"]

38 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью jQuery и CSS. В этот раз это плагин ...

jQuery-плагин для стилизации input[type=

jQuery-плагин для стилизации input[type="checkbox"]

35 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Как и обещал ранее, делюсь своим очередным jQuery-скриптом в виде плагина. Он предназначен для свободного оформления ...

jQuery-плагин для стилизации select’ов

105 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, ...

Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров

105 комментариев

Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью ...

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

  1. Егор
    9 лет назад

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

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

  2. Иван
    9 лет назад

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

  3. Сергей
    9 лет назад

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

    $('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. Иван
    9 лет назад

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

  5. Тимофей
    9 лет назад

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

  6. Oleg
    9 лет назад

    Добрый день.

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

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

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

    Спасибо.

  7. Олег
    9 лет назад

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

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

  8. Dimox
    9 лет назад

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

  9. Мир
    9 лет назад

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

  10. Евгений
    9 лет назад

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

  11. Александр
    9 лет -1 месяц назад

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

        $.extend($.colorbox.settings, {
        current: "Billede {current} af {total}",
        previous: "Forrige",
    });
  12. Евгений
    9 лет -1 месяц назад

    Здравствуйте, у меня такой вопрос, долго стилизуется select в котором option-ов около 1300, что можно сделать?

  13. Анатолий
    9 лет -1 месяц назад

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

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

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

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

  14. Fedor
    8 лет 11 месяцев назад

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

  15. in
    8 лет 11 месяцев назад

    Как использовать метод $('select').styler ('destroy'); к одному определенному элементу селекта?

  16. Анатолий
    8 лет 11 месяцев назад

    Никак не получается отловить событие клика
    $('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. Игорь
    8 лет 11 месяцев назад

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

  18. Сергей
    8 лет 11 месяцев назад

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

  19. Валерий
    8 лет 11 месяцев назад

    Можете подсказать, при выборе из формы не передается значение 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. Max
    8 лет 11 месяцев назад

    Скажите, а планируется-ли стилизовать поле input type="number"
    А то оно сильно по разному выглядит в разных браузерах, и почти во всех — ужасно ;)

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