Главная 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. Классная вещь. Спасибо

  2. Добрый день, почему-от radio не переключается, выделяются все хотя name один и тот же: jsfiddle.net/maLmtmjm/1/

  3. Уважаемый Dimox. Пофиксите, пожалуйста баг c Mac OS, а то из-за этого бага, мои коллеги отказываются его использовать ((

  4. Сан Саныч
    9 лет назад

    Привет,

    Имеем селектор на drupal с множественным выбором опций. Скрипт его оформил в радио-кнопочки, всё красиво. Выбрать несколько опций можно, удреживая клавишу ctrl. Необходимо, чтобы был мультивыбор нескольких радио-кнопок и через клик (как если бы это были чекбоксы).

    Dimox, подскажите, пожалуйста, пример или куда смотреть. Спасибо.

    • К сожалению, я ничего не понял.

      • Ок, перефразирую: речь идёт про мультивыбор в селекторе jq-select-multiple; внутри него множество опций (li), которые внешне выглядят радинопками.

        Сейчас опции (li) выбираются по клику, но по одной. Хочется сделать возможность выбора нескольких таких опций (li) по клику (как если бы это были чекбоксы из демо в разделе #checkbox). Вопрос — как задать мультивыбор опций в селекторе jq-select-multiple?

  5. Не подскажите, как быть. я использую связанные опции на опенкарт и при выборе одного селекта, подгружаются/меняются данные в другом селекте, так вот в том другом селекте происходит касяк-он становится обычного вида

    • В конце функции, которая добавляет/изменяет второй селект, запустите для этого селекта .styer ().

      • Не подскажешь куда и что нужно добавить, что-то совсем не получается, куда только не пихал стайлер

        скрипт chained:

        (function(a){a.fn.chained=function(b,c){return this.each(function(){var c=this;var d=a(c).clone();a(b).each(function(){a(this).bind("change",function(){a(c).html(d.html());var e="";a(b).each(function(){e+="\"+a(":selected",this).val()});e=e.substr(1);var f=a(b).first();var g=a(":selected",f).val();a("option",c).each(function(){if(!a(this).hasClass(e)&amp;&amp;!a(this).hasClass(g)&amp;&amp;a(this).val()!==""){a(this).remove()}});if(1==a("option",c).size()&amp;&amp;a(c).val()===""){a(c).attr("disabled","disabled")}else{a(c).removeAttr("disabled")}a(c).trigger("change");if(typeof obUpdate=="function"){a(':input[name^="option"]',c).change(function(){obUpdate(a(this),useSwatch)})}if(typeof updatePx=="function"){a(':input[name^="option"]',c).change(function(){updatePx()})}});if(!a("option:selected",this).length){a("option",this).first().attr("selected","selected")}a(this).trigger("change")})})};a.fn.chainedTo=a.fn.chained})(jQuery)
        

        код где он применяется в шаблоне:

        <?php if ($chained_options) { ?>
        <script type="text/javascript"><!--
        <?php foreach ($chained_options as $chained_option) { ?>
        $('#option-<?php echo $chained_option['child']; ?>').chained('#option-<?php echo $chained_option['parent']; ?>');
        <?php } ?>
        //--></script>
        <?php } ?>
        • Тут есть решение, если, конечно, это тот же самый плагин.

          • Сделал, как там и все-равно не работает-меняется селект на стандартный вид (

          • а вот если вместо:

            $('#series, #mark').trigger('refresh');

            прописать:

            $('input, select').styler();

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

            • Да, если это работает, значит все правильно.

              • Сделал в категориях вывод по аналогии с модулем (где все работало) но в категориях не работает, вторая связанная опция вообще не открывается… Dimox, можешь глянуть, мб что-то не туда вставил?

              • Dimox, привет, с предыдущими проблемами справился, все работает, но вот уже второй день не могу победить проблему: на сайте есть фильтр (на аякс) после фильтрации, стилизация не исчезает, но невозможно открыть второй селект (связанный с первым селектом) триггер и стайлер пихал уже где токо можно и в success, ничего не помогло, не мог бы помочь, не хочется удалять стилизацию, понравился твой плагин очень.

              • Блин, починил, ща вроде все работает, добавил стайлер в самый низ страницы, до этого в середине был

  6. День добрый!
    Такая проблема, в IE8 и ниже поле select’а не отображается ни выбранный пункт, ни стрелка, ни картинка вместо стрелки.
    В чем проблема может быть?

  7. Сан Саныч
    9 лет назад

    Предыдущий комментарий не актуален. Разобрался.

    Всё просто.
    Всего-навсего нужно было использовать правило зажатого ctrl на клик по опции (li).

    li.filter(':not(.disabled):not(.optgroup)').click(function(e) { el.focus();
    var clkd = $(this);
    if (clkd.is('.selected')) clkd.removeClass('selected first');
    else clkd.addClass('selected first'); clkd.siblings().removeClass('first');
    

    Спасибо за плагин и за отзывчивость.

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

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

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

  9. Возможно ли в селекте элементам выставлять цвет?

  10. В документации:
    текст по умолчанию в одиночном селекте; отображается, когда у первой опции отсутствует значение:

    <option></option>

    это когда нужно установить свой плейсхолдер у select

    На это ругается валидатор w3c

    Element option without attribute label must not be empty.

  11. Здравствуйте, столкнулся с проблемой необходимости закрытия select’а при ресайзе/скролле окна, как это можно сделать при использовании вашего плагина? Кстати стандартный селект во всех этих случаях закрывается автоматически, возможно стоит это реализовать в самом плагине.

  12. Еще при использовании плагина часто возникает проблема когда выпадающий список у select обрезается какими то внешними контейнерами с overflow: hidden. Если убрать overflow: hidden нет возможности, то это становится проблемой. Решал подобную задачу изменением позиционированния всего кастомизированного селекта на fixed и расчетом координат где был селект. Может быть вы знаете еще какое нибудь решение подобной проблемы? Стандартный селект в подобных случаях не обрезается.

  13. Есть какой то метод который позволяет открыть стилизованный select из js? Как я понимаю обычный селект из js нельзя открыть просто так.

  14. Как сделать селект изначально неактивным, и как его потом активировать (например после нажатия на кнопку какуюто). Добавление класса «disabled» на старте ничего не дает (

  15. А что нет параметра, чтобы при заданной ширине селекта длинные option переносились на новую строку? Плохо, что значения обрезаются

  16. Столкнулся с такой проблемой, когда в select только один option, не выбирается этот option внутри стилизованного select. Так и остается надпись «Выберите». Кто знает в чем проблема?

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

  18. Здравствуйте! Плагин классный, пользуюсь постоянно, но встала задача сделать селект не с текстом, а с картинками, можно как-нибудь такое провернуть? Спасибо!

  19. После установки плагина страница стала загружаться 26 секунд (без плагина 0,86 секунд)…

  20. Плагин отлично работает, элементарно подключается.
    Dimox на моём сайте самый большой содержит более 1200 штук


    0.8
    0.9
    1.0
    1.1
    1.2
    1.3
    1.4
    1.5
    и так далее…

    Проблема в скорости загрузки эффектов плагина. Страницы — любые грузятся в среднем 40−55 секунд. Есть ли решение данной проблемы?

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