Главная › 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. Алексей
    11 лет -1 месяц назад

    Можно ли сделать на мобилах при открытии селекта вывод дефолтной выпадалки? Сейчас при клике на селект на телефоне (Андройд 4,2) страница прыгает в верхний левый угол. Чтобы выбрать селект приходится повторно тянуть пальцем экран до нужного места.

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

    Добрый день!!! Очень понравился плагин. Хотелось бы его использовать его в своем проекте, но почему-то имеются проблемы с его использованием, а решить их у меня не получается. Очень бы хотелось получить совет. Алгоритм «область-район-город». Изначально имеется селект с областями. Селекты с районами и городами «display none». При выборе области с помощью LOAD в уже видимый селект с районами должны подгружаться из стороннего php файла option’ы с соответствующими выбранной области районами. Далее, по аналогии должен происходить сценарий район-город. Применения АЯКСА вне Вашего плагина отрабатывает на ура. При использовании плагина подгрузка контента, а именно, option не происходит. Заранее благодарю за помощь.

    • Dimox
      11 лет -1 месяц назад / ответ на коммент Александр

      После вставки пунктов списка на селекте нужно применить .trigger ('refresh').

      • Александр
        11 лет -1 месяц назад / ответ на коммент Dimox 
        
modal_oblast.change(function(){                                               -выбор одного пункта списка
var modal_oblast_selected=$("#modal_oblast :selected").val();    -значение выбранного пункта
if(modal_oblast_selected==""){          если ни одна из областей не выбрана
	modal_gorod.val('');             
        tr_gorod.fadeOut(200);
	modal_rayon.val('');  
        tr_rayon.fadeOut(200);
	}else{                                     если выбрана область
		modal_rayon.val('');         обнуление селекта с районами
		tr_rayon.fadeIn(200);        показ селекта с районами
		tr_gorod.fadeOut(200);     скрыть селект с городами
		modal_rayon.load('/user_profile/region/rayon.php',{pid:modal_oblast_selected,search_region:"search_region"});           загрузка в селект с районами контента (список районов, соответствующих выбранной области
		modal_rayon.trigger('refresh');

        Ничего не работает. Точнее работает, как и ранее. Повторно выбираешь область-в селекты с районами подгружаются районы первой выбранной, а не повторно выбранной области

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

    Хочу дополнить свое предыдущее сообщение. Обнаружил такую осбенность. Впервые выбираем какую либо область. Подгрука районов в следующий селект не происходит. Выбираем повторно другую область. В селект подгружаются районы, соотвествующие выбранной в предыдущий раз области. И так далее, при третьем выборе, подгружаются района из вторично выбранной области. Что-то не понимаю как это исправить

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

    блин! без стилизации селекта скрипт мой работает на ура!!! Вырбанное значение списка отсылается в обработчик аяксом. Там в соответствии с выбранной областью формируется список районов. Вот он и должен подгружаться с селект. Но в данном случае имеет какая та задержка в подгрузке. Я уже писал про это. Что делать? Не хочется отказываться от этого красивого плагина. Неужели придется простыми селектами обходиться?

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

    Извините!!! но я очень надеялся на Ваш помошь. Наверное, ошибся

    • Dimox
      11 лет -1 месяц назад / ответ на коммент Александр

      Единственное, что я могу сказать — где-то ошибка в ваших скриптах. В комментарии № 415 приведен пример сайта, где селекты сделаны по тому же принципу, что и у вас, и там все работает.

      • Александр
        11 лет -1 месяц назад / ответ на коммент Dimox

        Я начинающий программист. Может быть В могли посмотреть код? Я был бы очень благодарен

        • Кирилл
          11 лет -1 месяц назад / ответ на коммент Александр

          Вот часть кода которая обрабатывает событие при выборе страны. Отличается от вашего варианта, конечно, но может пригожится. Если хотите — оставьте ваши контактные данные и я по свободе постараюсь Вам помочь.

          		$('#country_id').change(function (e) {
		var country_id = $(this).val();
		if (country_id == '0') {
			$('#region_id').html('<option>- выберите регион -</option>');
			$('#region_id').attr('disabled', true);
			$('#city_id').html('<option>- выберите город -</option>');
			$('#city_id').attr('disabled', true);
			return(false);
		}
		$('input#country').val($('#country_id .text').html());
		$('#region_id').attr('disabled', true);
		$('#region_id').html('<option>загрузка...</option>');
		
		var url = 'путь к php функции, которая из БД возьмет список областей';
		
		$.post(
			url,
			{
			country_id:country_id
			},
			function (result) {
				if (result.type == 'error') {
					alert('error');
					return(false);
				}
				else {
					var options = ''; 
					var optionslist = ''; 
					
					$(result.regions).each(function() {
						options += '<option value="' + $(this).attr('region_id') + '">' + $(this).attr('name') + '</option>';
						optionslist += '<li class="">' + $(this).attr('name') + '</li>';
					});
					
					$('#region_id').html('<option value="0">- выберите регион -</option>'+options);
					//var reg = $('#region_id-styler').html();
					//$('#region_id-styler').removeClass('disabled');
					//$('#region_id-styler').html(reg+'<div style="position: absolute; overflow-y: auto; overflow-x: hidden; display: none; height: auto; bottom: auto; top: 33px;" class="dropdown"><ul style="list-style: none"><li class="">- выберите страну -</li>'+optionslist+'</ul></div>')
					$('#region_id').attr('disabled', false);
					$('#city_id').html('<option>- выберите город -</option>');
					$('#city_id').attr('disabled', true);  	
							
				}
				e.preventDefault();
    /* делаем чекбокс неактивным */
    $('select#region_id').attr('disabled', false)
      /* обновляем состояние псевдочекбокса */
      .trigger('refresh');
			},
			"json"
			
		);
		  
	});
          • Александр
            11 лет -1 месяц назад / ответ на коммент Кирилл

            Я все сделал. В файле, который методом load подгружался в селект, прописал. trigger ('refresh') и все стало работать хорошо. До этого рефреш производил в скрипте, работающем в файле, в котором исходно распологался селект и он как-то странно реагировал. Спасибо за плагин!!! Возможно его использование в своем проекте с указанием Ваших данных? /* jQuery Form Styler v1.3.4 | © Dimox | dimox.name/jquery-form-styler/ */

  6. Кирилл
    11 лет -1 месяц назад

    Сейчас заметил, что на Mac OS не работает выбор нескольких пунктов в списке множественном. Ни клавиша control ни command не срабатывают. Тлько shift. При этом в обычных селектах без стилизации через command выбирается нормально. В плагине где-то указывается по нажатию на какую кнопку срабатывает выбор?
    Вообще для меня это сейчас не принципиально. За последние лет 5 ни при создании ни при использовании сайтов не видел множественных списков. Но вот может кто-то споткнется на этом месте.
    Отличный плагин в общем! Спасибо и успехов!

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

    Вопрос: с чем может быть связано, что на одной странице темизируется только один input и/или select? Где искать проблему?

  8. Ruslan
    11 лет -1 месяц назад

    У меня такой вопрос. Элемент select у меня создается динамически с помощью Jquery. И стилизация не происходит. Как это исправить?

  9. Михаил
    11 лет -1 месяц назад

    при клике на задизейбленый чекбокс сыпется еррор
    too much recursion

  10. irrevion
    10 лет 11 месяцев назад

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

    
	this.reset = function() {
		self.showResult('');
		setTimeout(function() {
			$('select', self.node).trigger('refresh');
			hideInappropriateElements();
		}, 100);
		return true;
	}
  11. irrevion
    10 лет 11 месяцев назад

    От он чё… Оказывается если в обработчике ресета кнопка вызвавшая событие становится disable, то в Фаерфоксе и Хроме действие по умолчанию срабатывает несмотря на это, а в Опере и ИЕ — нет.

    В приведённой выше функции this. reset вызывалась функция объекта-прототипа self. showResult ('');

    	this.showResult = function(result) {
		var $resBox = $('.calculator-result', this.node).eq(0);
		var $res = $('.calculator-result-value span', $resBox);
		if (result) {
			result = result.toFixed(2);
		}
		if (this.animate_result) {
			this.putAnimatedResult(result);
		} else {
			$res.text(result);
		}
	};

    Которая вызывала метод this. putAnimatedResult (result);

    
	this.putAnimatedResult = function(result) {
		//var $buttonSubmit = $('.calculator-buttons input[name="calculate"]', self.node);
		var $buttons = $('.calculator-buttons input', this.node);
		$buttons.addClass('calculator-button-disabled');
		$buttons.prop('disabled', true);
		var self = this;
		$('.calculator-dynamic-result-value', self.node).animate({
			width: '1px'
		}, 300, function() {
			$('.calculator-dynamic-result-value', self.node).text(result);
			$('.calculator-dynamic-result-value', self.node).animate({
				width: '114px'
			}, 600, function() {
				$buttons.prop('disabled', false);
				$buttons.removeClass('calculator-button-disabled');
			});
		});
		$buttons.removeClass('calculator-button-disabled');
	};

    В которой дисейблилась кнопка $buttons.prop ('disabled', true);

    То есть если в момент нажатия кнопка активна, в нормальных браузерах действие по-умолчанию происходит даже если в функции-обработчике эта кнопка была дезактивирована.

  12. WildHind
    10 лет 11 месяцев назад

    Сударь, у вас в код вкралась логическая ошибочка.
    Если на странице более одной формы, и в разных формах есть радиокнопки с одинаковым name, то при выборе радиокнопки в одной форме, все радиокнопки с этим же именем в других формах оформляются как не отмеченные.
    Для себя лично мне удалось исправить ошибку так:

    $('input[name="' + el.attr('name') + '"]').prop('checked', false).next().removeClass('checked');

    Заменить на:

    radio.closest('form').find('input[name="' + el.attr('name') + '"]').prop('checked', false).next().removeClass('checked');

    Но что-то мне подсказывает, что можно сделать более красиво.

  13. Андрей
    10 лет 10 месяцев назад

    Подскажите, как сделать выравнивание чекбоксов и радио? что бы вертикально они были по центру т. е. вровень с текстом

  14. Михаил
    10 лет 10 месяцев назад

    Спасибо большое, Дмитрий, за эту полезную штуку!
    У меня возможно специфическая проблема… При навешивании на select инлайнового события onChange (например) все хорошо работает. Но если динамически присвоить обработку события, то этой обработки не происходит при выборе элемента списка.

    //ie
document.getElementById("id").attachEvent("onchange"),function);
//или w3
document.getElementById("id").addEventListener("change"),function,false);

    Заранее спасибо

    • Dimox
      10 лет 10 месяцев назад / ответ на коммент Михаил

      Я в нативном JavaScript плохо разбираюсь.

      • Михаил
        10 лет 10 месяцев назад / ответ на коммент Dimox

        Нашел решение

        <select id="fontSelector" onChange="alert('Контекстный обработчик')">
<option value="Arial" id="Arial" style="font-family:Arial;">Arial</option>
<option value="Comic Sans MS" style="font-family:Comic Sans MS;">Comic Sans MS</option>
<option value="Courier New" style="font-family:Courier New;">Courier New</option></select>
        	function fun1() {
		alert("Первый динамический обработчик");
	}
	
	function fun2() {
		alert("Второй динамический обработчик");
	}
	
	function fun3() {
		alert("Третий динамический обработчик");
	}

$('select').styler();
$("#fontSelector").on("change",function() { alert("Обработчик jquery");});
document.getElementById("fontSelector").addEventListener("change", fun1, false);
document.getElementById("fontSelector").addEventListener("change", fun2, false);
document.getElementById("fontSelector").addEventListener("change", fun3, false);

        Ранее при выборе пункта псевдоселекта воспроизводился только инлайновый обработчик события, то есть выводилось сообщение «Контекстный обработчик». Но по идее должны вызываться все обработчики, добавленные в список на срабатывание события onchange.
        Чтобы так получалось немного поправил код в событии при клике на пункт списка select’а. Вместо

        el.change();

        Вставил

        var e_onchange = document.createEvent("Event");
e_onchange.initEvent("change", false, true);										document.getElementById(el.context.id).dispatchEvent(e_onchange);

        После такой замены срабатывали все обработчики, как и на реальном select’е, то есть вывелось
        Контекстный обработчик
        Обработчик jquery
        Первый динамический обработчик
        Второй динамический обработчик
        Третий динамический обработчик

        Решение нашел методом тыка

  15. Вадим
    10 лет 10 месяцев назад

    Подскажите как вернуть такой select в начальное положение программным путем.
    Команды, которые можно применить для этой цели к стандартному select, не помогают.
    Например,

    function f ()
    {
    document.all.myform.reset (); // Другой вариант: document.all.myform.musicType.selectedIndex=0;
    }

    R&B
    Jazz
    Blues
    New Age

    Переключить

    • Dimox
      10 лет 10 месяцев назад / ответ на коммент Вадим

      Сделайте выбор первого пункта (либо того, который выбран по умолчанию). По сути тот же ресет.

      • Вадим
        10 лет 10 месяцев назад / ответ на коммент Dimox

        так приведенная выше функция f это и делает (в комментариях указан второй вариант). С обычным sekect это проходит, а с предлагаемым нет. Причем странно, что selectedIndex меняется как нужно (проверял с помощью alert), но в select ничего не меняется, остается выбранным тот пункт, что был выбран до этого.

        В примере, что я хотел привести отображенные ниже элементы (R&B, Jazz, Blues,
        New Age) это элементы списка с именем musicType, который находится в форме myform. Почему-то этот список не отобразился

  16. alex
    10 лет 10 месяцев назад

    добрый день, что затупил не могу понять вот код

    		<script>
				function submitForm1()
		{
alert ('rrr');		
		}
		</script>
		
<input type="radio" id="PERSON_TYPE_11" name="PERSON_TYPE1" value="1" checked="checked" onClick="submitForm1()">

    при onClick не срабатывает (

  17. Олег
    10 лет 10 месяцев назад

    Если в форме несколько селектов, как сделать, что бы при раскрыти второго селекта первый, уже раскрытый селект, сворачивался. То есть что бы на странице всегда было открыто не более одного селекта. Спасибо.

    • Dimox
      10 лет 10 месяцев назад / ответ на коммент Олег

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

      В скрипте найдите div.dropdown и поменяйте на div.jq-selectbox__dropdown.

      В следующей версии исправлю.

  18. Олег
    10 лет 10 месяцев назад

    спасибо, работает

  19. 3ахар
    10 лет 10 месяцев назад

    А подскажите, есть возможность отключить в этом плагине скажем select? А то повсеместно ловит, хотелось бы оставить radio и checkbox, но юзать 2 прошлых плагина по отдельности не охото)

  20. 3ахар
    10 лет 10 месяцев назад

    Прошу прощения, еще вопросик. Когда решил проверить действия галочек и радиобаттонов, выяснелось, что функции инвертированы. Если чекбокс отмечен — значит не отмечен, с радио тоже самое.
    Пример:
    Выбрать чекбоксом 1,2,3 — Ставим галочки на 1 и 3, отправляем форму. При выводе отмеченных ранее галочек вижу, что отмечена лишь 2. И наоброт, из 1,2,3 выбрать 2, при выводе будет показано, что отмечены 1 и 3.

    Не подскажите, куда думать?

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