Главная › 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=”radio”]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Dimox
    10 лет назад

    Выложил новую версию – 1.5.3.3.

    • неумелый
      10 лет назад / ответ на коммент Dimox

      Я недавно начал изучать JQuery и возможно задам ужасно чайниковский вопрос, но тем не менее: У меня есть код, но нигде в коде не встречается активация плагина, но все select автоматически становятся оформленными вашим скриптом. Никак не пойму где и что его активирует? Этого кода нету точно нигде:

      <script>  
(function($) {  
$(function() {  
  
  $('input, select').styler();  
  
})  
})(jQuery)  
</script>
    • Евгений Черномор
      10 лет назад / ответ на коммент Dimox

      Спасибо , за полезный плагин, очень полезная штука. Единственное замечание, в css некоторые свойства написать бы через префиксы, чтобы обеспечить кроссбраузерность, было бы отлично. А так все СУПЕР!!

  2. Вадим
    10 лет назад

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

  3. Вадим
    10 лет назад

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

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

        $('#search_form select').change(function(){
        $('#search_form').submit();
    });
  4. Андрей
    10 лет назад

    Скажите пожалуйста, как заставить список всплывать в верх, а то его обрезает overflow: hidden; убрать его не получиться, нужно чтобы он верх всплывал????

  5. Игорь
    10 лет назад

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

  6. Игорь
    10 лет назад

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

  7. Александр
    10 лет назад

    При клике на сам селект не отрабатывается событие onSelectClosed

  8. Олег
    10 лет назад

    Здравствуйте, у меня вопрос по одиночному селекту.

    Как я понял селект состоит из 2 списков: select и ul. И при загрузке из БД значения полей li и option одинаковые. Поэтому при выборе определенного значения оно в БД прекрасно обновляется.

    Но если селект заполняется данными из AJAX-ответа, который меняет значения в UL, в БД новое значение не летит, т.к. оно берется из тега select, а значения в нем не меняются.

    Подскажите, пожалуйста, как изменить значения в select на такие же как в UL?

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

      Через AJAX нужно менять select, а не UL. UL создается плагином, поэтому не нужно его трогать.

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

        При получения AJAX-ответа в select у меня пропадают стили этого списка.
        Всего у меня два списка – один с регионами, другой с городами. При выборе из первого списка региона, подгружаются во второй список его города, но уже без стилей оформления. Подскажите, как правильно сделать вывод?

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

          После завершения AJAX-запроса запускайте .trigger('refresh') или .styler() для измененного селекта.

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

            Куда я только не вставлял .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. Андрей
    10 лет назад

    Вопрос в следующем: Селект с плагином 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. Max
    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.

    • Max
      10 лет назад / ответ на коммент Max

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

      <div class="jq-file">
							<div class="jq-file__name">Файл не выбран</div>
							<div class="jq-file__browse">Обзор...</div>
							<input type="file">
						</div>
      • Dimox
        10 лет назад / ответ на коммент Max

        Посмотрите страницу с примерами, там имя файла отображается после выбора. Если у вас это не работает, покажите вашу страницу с проблемой.

  11. Max
    10 лет назад

    Страница у меня в денвере еще.. Единственное что я поменял, это .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. Ксения
    10 лет назад

    Здравствуйте! Хотела попользоваться Вашим плагином в своих динамических списках, они формируются через 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. Александр
    10 лет назад

    Доброго времени суток, интересует такой момент.
    Добавляю селекту и диву, в который он оборачивается

    width:200px

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

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

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

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

    • Dimox
      10 лет назад / ответ на коммент Александр

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

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

      .jq-selectbox {
	width: 200px;
}

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

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

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

      • Александр
        10 лет назад / ответ на коммент Dimox

        Закоментил умное позиционирование – полет нормальный.
        Нашел ошибку у себя. у родительского блока был overflow:hidden. Вот все и не влезало)

        Спасибо. кстати. Есть 1 небольшое пожелание – сделать, чтобы скрипт изменял еще и стрелку (переворачивал), когда список открыт и обратно

  14. MasDen
    10 лет -1 месяц назад

    Неплохой плагин, но только есть хороший лично для меня минус.
    Если выпадающий список открыли то срабатывает event – onSelectOpened, но если пользователь закрыл список просто кликнув на любой другой элемент на страницу то событие onSelectClosed не срабатывает. Также проблемы с .opened когда пользователь открывает список, класс почему-то не добавляется.

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

      Что-то у тебя походу глюки со скриптом. все работает, что ты описал.

      // прячем выпадающий список при клике за пределами селекта
								$(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');

									}
								});
    • Dimox
      10 лет -1 месяц назад / ответ на коммент MasDen

      Данные проблемы наблюдаются только в Internet Explorer, буду разбираться.

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

        Если чем-то помогу – Я проверил в 9ом ИЕ, полет нормальный, если клацать по стрелке. А если клацать по самому селекту, то беда. да – “не выпадает” список

  15. Dimox
    10 лет -1 месяц назад

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

  16. Олег
    10 лет -1 месяц назад

    http://toolfind.ru/toolfindsearch/?template=new&result_new=Y#

    На радио кнопки посмотрите. http://joxi.ru/XOvCU4wyTJDkBqtKw84

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

    После обновления до версии 1.5.4. в Ие 9-10 такая вот лабуда, при нажатии на сам селект.
    Баг с закрыванием исправлен, как и обещалось =)
    А вот тут – не ясно(
    http://joxi.ru/c8rEU4wyTJDuBqAhFYc

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

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

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

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

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

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

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