Главная JavaScript

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

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

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

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

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

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

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

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

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

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

    <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. Dimox помоги пожалуйста куда вставить:
    $('input, select').trigger ('refresh');

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

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

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

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

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

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

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

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

     .jq-checkbox
    overflow: hidden;

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

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

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

  10. Добрый день.

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

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

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

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

  11. Подскажите пожалуйста, на 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. На ie7 клик по псевдо чекбоксу не срабатывает. Хотя клик по лейблу срабатывает. Незнаю почему возможно оригинальный инпут перекрывает. Как это исправить?

  13.         $( ".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. А какой нибудь callback есть?

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

    • Можно узнать, для чего это нужно?

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

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

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

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

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

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

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

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

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

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

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

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

                $('.bxslider').bxSlider({
                  onSliderLoad: function(){
                    // do funky JS stuff here
                    alert('Slider has finished loading. Click OK to continue!');
                  },
                • Плохо, что не можете показать пример, т.к. я не вижу разницы между способом, который я показал выше, и колбеком. У меня получается один и тот же результат.

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

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

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

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

                  • у меня есть 10 селектов с классом .some-class. Я запускаю ваш код

                    $('select').styler();  
                    $('div.jq-selectbox').each(function() {  
                      if ( $(this).is('.some-class') ) {  
                       alert(1);
                      }  
                    }) 

                    alert появится 10 раз. А надо 1 раз. Как-то так

                    $('select.some-class').styler({
                    onReady: function(){
                       alert(1);
                    }
                    })

                    После того как селекты будут готовы появится alert (1).

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

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

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

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

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

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

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

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

    $('#file_id-styler .jq-file__name').html(filePlaceholder);

    А этого не происходит.

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