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>; Содержание: Демонстрация работы плагина Достоинства Недостатки Скачать Плагин «jQuery Form Styler» Подключение плагина ...

Полезные комментарии (10)
Комментарии (2 599)
  1. 1

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

  2. 8
    Вадим

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

  3. 12
    Вадим

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

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

     $('#search_form select').change(function(){
     $('#search_form').submit();
     });
  4. 19
    Андрей

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

  5. 27
    Игорь

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

  6. 31
    Игорь

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

  7. 32
    Александр

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

  8. 34
    Олег

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

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

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

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

  9. 44
    Андрей

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

    А я вот никак не могу понять как нужно делать, что бы 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.

  11. 52
    Max

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

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

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

    width:200px

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

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

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

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

  14. 66
    MasDen

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

    • 67
      Александр

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

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

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

  15. 70

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

  16. 71
    Олег

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

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

  17. 86
    Александр

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

  18. 91
    Александр

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

  19. 93
    Александр

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

  20. 95
    Александр

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

  1. 1
    Роман

    Может кому пригодится, вот решение:

    if (!$(this).html().match(new RegExp('\^' + query, 'i'))) {
  2. 2

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

    setTimeout(function() { 
    	$('input, select').styler(); 
    }, 100)
    

    Буду признателен, если кто-то предложит более красивое решение.

  3. 3

    Можно.

    <select class="myselect">
    .jq-selectbox.myselect { 
     width: 250px; 
    }
    
  4. 4

    В общем, проблема была с angular.

    Имеем: калькулятор на angularjs, данные приходят, но селекты не открываются.
    Решение: Добавить setTimeout примерно как в пятом пункте, чтобы angularjs успел заполнить данными наши селекты :)

  5. 5
    <select class="select1">
    <select class="select2">
    
    .jq-selectbox.select1 {
    	width: 200px;
    }
    .jq-selectbox.select2 {
    	width: 300px;
    }
    
  6. 6
    Денис

    Может кому нибудь пригодится.
    Строка 530

    if (bottomOffset > (minHeight + searchHeight + 20) &amp;&amp; !el.hasClass("top")) {

    Тем селектам которые надо открывать вверх, добавляем класс «top».

  7. 7

    Можно. Вот решение:

    if (window.webkitURL) {
    	$('input[type="file"]').attr('title', ' ');
    } else {
    	$('input[type="file"]').attr('title', '');
    }
    
  8. 8
    Фарит
    @
    		(function($) {
     $(function() {
     var _dropdown;
     var settings = {autoReinitialise: true};
     $('input, select').styler({
     selectSearch: true,
     onFormStyled: function(){
     _dropdown = $('.jq-selectbox__dropdown');
     _dropdown.find('ul').wrap('<div class="scroll-pane" />');
     },
     onSelectOpened: function(){
     var _ul = $(this).find('.jq-selectbox__dropdown ul');
     var height = _ul.height();
     var _srollPane = _dropdown.find('.scroll-pane');
     _srollPane.height(height);
     _ul.css('max-height', 'none');
     _srollPane.jScrollPane(settings);
     }
     });
     });
     })(jQuery);
    	
    .scroll-pane
    {
     width: 100%;
     overflow: auto;
    }
    

    извините за code style, стилезуйте на свой вкус.

  9. 9
    neoxaker

    Более правильным вариантом решения проблемы с подключаемыми шрифтами была бы переинициализация плагина после окончания загрузки шрифта. Отловить загрузку шрифта можно при помощи гугловского скрипта «webfontloader» https://github.com/typekit/webfontloader . При подключенном плагине код переинициализации выглядел бы так:

    (function(){
     if (typeof WebFont != 'undefined') {
     WebFontConfig = {
     custom: {
     families: ['Arimo']
     },
     active: function() {
     $('select, :checkbox, :radio').trigger('refresh');
     }
     };
     WebFont.load(WebFontConfig);
     }
    })();
    

    В данном случае подключалось семейство шрифтов Arimo.

  10. 10

    В плагине это не предусмотрено. Можно сделать следующим образом:

    <label><input type="checkbox" /> Чекбокс</label>
    $('input:checkbox').change(function() {
    	if ($(this).is(':checked')) {
    		$(this).closest('label').addClass('checked');
    	} else {
    		$(this).closest('label').removeClass('checked');
    	}
    });
    
Ваш комментарий