adminvps

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 583)
  1. 1
    Юрий

    Пробовал код с шапки:

    (function($) { 
    $(function() { 
     
     $('button').click(function(e) { 
     e.preventDefault(); 
     /* делаем чекбокс неактивным */ 
     $('input:checkbox').attr('disabled', true) 
     /* обновляем состояние псевдочекбокса */ 
     .trigger('refresh'); 
     }) 
     
    }) 
    })(jQuery) 
    

    Как можно сделать для всех элементов обновление? Или же при добавлении класса, тоесть любой вариант

  2. 3
    Юрий

    Dimox извиняюсь, но я мало чего понимаю в jquery.
    Можете написать полный код. И мне надо обновлять не

    <script> 
    (function($) { 
    $(function() { 
    $('input, select').styler(); 
    $('input, select').trigger('refresh');
    }) 
    })(jQuery) 
    </script> 
    

    Пробовал вот так

  3. 5
    Юрий

    У меня интернет-магазин и есть радио и чекбокс кнопки в фильтрах, вот мне и их надо изменить.
    План ваш я поставил, он заработал. При первом заходе в каталог ваш плагин все кнопки стилизует но после применения фильтром все кнопки становятся обычными. Вот это мне и надо решить.
    В общем надо как то обновлять чекбоксы и радио кнопки

  4. 8
    Иван

    Извиняюсь в предыдущим Коментарии опечатался
    ширина псевдоселекта не хочет меняться

    <select class="sel1"></select> 
    <select class="sel2"></select> 
    <select class="sel3"></select> 
    <select class="sel4"></select> 
    .sel1,.sel2{width:400px}
    .sel3,.sel4{width:600px}

    Что я не так делаю?
    И еще этот css файл с моими настройками должен быть до jquery.formstyler.css или после?
    пробовал и так и так все равно ширина не меняется

  5. 11
    Юрий

    Dimox помоги пожалуйста куда вставить:
    $(‘input, select’).trigger(‘refresh’);

    Уже куда только не ставил.

    Этот код отвечает за фильтрацию
    [вырезано, слишком большой код]

  6. 13
    serzhei

    Подскажите, можно ли в этом плагине в селекте — выпадающий ul обернeть в див
    Например так

    Надо кросбраузерно несколько фоновых картинок вставить

  7. 14
    Иван

    А как мне получить значение выбраного поля?
    вот например есть селект

    <select class="sel1">
    <option value="1">запись 1</option>
    <option value="2">запись 2</option>
    </select> 

    допустим я выбрал запись 2
    пишу после клика на форму alert($(«.sel»).val())
    Выводиться пустота

  8. 18
    Zoxon

    Скажите зачем у

     .jq-checkbox
    overflow: hidden;

    скриптом ставится?

    • 19

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

  9. 20
    Zoxon

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

  10. 21
    Александр

    Добрый день.

    Большое спасибо вам за ваш труд!

    Я использовал ваш плагин для стилизации селектов (там обсуждение закрыто)

    Заметил, что он работает не должным образом на версиях jquery выше 1.8.2 (внешне все ок, но при заборе значения value после нескольких переключений возникает «замыкание» на первом опшионе)

    Не знаю, относится ли это к данному плагину, но все равно хочу спросить — может быть вы знаете как исправить, чтобы он работал и на свежем jQuery

  11. 23
    Иван

    Подскажите пожалуйста, на 1 форме задействую несколько select
    Скажите плз как определяется ширина этого блока? она ставится автоматом?

    <div class="jq-selectbox__select-text" style="width: 101px;">Первое значение</div>

    дело в том что у меня ширина этого блока почему то больше чем ширина блока

    <div class="jq-selectbox__select" style="position: relative">
    .....
    </div>

    мне нужно чтобы

    style="width: 101px;"

    вообще не было..как это сделать?

  12. 28
    Zoxon

    На ie7 клик по псевдо чекбоксу не срабатывает. Хотя клик по лейблу срабатывает. Незнаю почему возможно оригинальный инпут перекрывает. Как это исправить?

  13. 32
    Alex
    @
     $( ".house-type" ).change(function() {
     $('.house-list__table').hide('fast');
     $($(this).val()).show('fast');
     });
    
     <select class="house-type">
     <option value="#rent">Аренда</option>
     <option value="#buy">Покупка</option>
     </select>
    

    При изменении значения селекта событие срабатывает два раза. первый раз возвращает правильное значение второй раз $(this).val() возвращает пустое значение. Никаких дополнительных функций для плагина не увидел. (например change: function(){}). Вот такая проблемка

  14. 36
    Евгений

    А какой нибудь callback есть?

  15. 38
    Евгений

    жаль, если будет свободное время добавьте хотя бы callback который будет срабатывать после выполнение вашего скрипта.

      • 40
        Евгений

        есть много селектов, или подгрузился новый селект. после стилизации по ним нужно пройтись циклом. В цикле идет поиск нужного класса. Этот класс не находит так как стилизация еще не прошла. Можно конечно поставить задержку, но это не очень хорошо. Нужно короче чтобы была возможность вызвать нужную функцию после того как ваш плагин выполнится. Думаю это не только мне пригодится. Во всех модных плагинах есть калбеки)

        • 42

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

          Проблема в том, что плагин проходит циклом (.each) по каждому стилизуемому элементу, и, если добавить колбек в конце этого цикла, то он будет запускаться после каждого стилизованного элемента. Если же этот колбек поставить после цикла, то он просто-напросто не срабатывает.

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

        • 43

          Магия слова в очередной раз сработала. Стоило публично написать о проблеме, как решение тут же нашлось.

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

          $('select').styler();
          $('div.jq-selectbox').each(function() {
          	if ( $(this).is('.some-class') ) {
          		// тут что-то делаем
          	}
          })
          

          С колбеком получается то же самое. Или может я что-то неправильно понял?

          • 44
            Евгений

            ну это решение подойдет если нужно, чтобы для каждого селекта отдельно сработала моя функция. Если допустим поставить туда alert(), то он будет вызываться столько раз сколько у меня селектов. Надо чтобы после стилизации можно было вызвать свою функцию 1 раз.

            • 45

              Неправда. С вышеуказанным кодом alert() сработает только для селекта с классом .some-class, а не для всех.

              Будет лучше, если покажете пример вашей ситуации.

              • 46
                Евгений

                ну а если этот класс не у одного селекта? пример я так не смогу показать. Просто надо вызвать функцию после выполнения вашего плагина. Вот например как есть у этого слайдера http://bxslider.com/examples/callback-api..

                $('.bxslider').bxSlider({
                 onSliderLoad: function(){
                 // do funky JS stuff here
                 alert('Slider has finished loading. Click OK to continue!');
                 },
                • 47

                  Плохо, что не можете показать пример, т.к. я не вижу разницы между способом, который я показал выше, и колбеком. У меня получается один и тот же результат.

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

                  Вот вы в комменте №998 писали:

                  после стилизации по ним нужно пройтись циклом. В цикле идет поиск нужного класса.

                  Код из коммента №1004 позволяет решить эту задачу.

  16. 50
    Андрей

    Большая просьба, добавить callback на открытие селекта, так как надо было вставить кастомный скролл, и пришлось править файл скрипта, что бы встроить туда апдейт скролла.

  17. 52

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

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

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

  18. 53

    Доступна новая версия плагина — 1.4.9. Добавлены колбеки.

  19. 55
    Вячеслав

    Очень хороший скрипт, легко устанавливается и настраивается!
    Есть маленький недочет, у меня на странице используются 3 селекта, взаимосвязанные между собой … в одном из селектов есть повторяющиеся названия, например http://www.gbmgroup.ru/kirpich/468 первый из селектов содержит 2 одинаковые значения, когда происходит change, то он просто не реагирует! Тогда как в других селектах, где значения не дублируются, все отрабатывает нормально!

  20. 59
    Alex
    $('#file_id').attr('value','').trigger('refresh');

    для type=»file» не срабатывает trigger refresh при обнулении поля.
    Может что-то там и вызывается, но в идеале должно выполняться обновление имени файла

    $('#file_id-styler .jq-file__name').html(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');
    	}
    });
    
Ваш комментарий