Главная 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. Привет, как этот плагин, а именно SELECT работает с формами, как получить значение value передать его методу POST??? AJAX???

  2. Добрый вечер, встретился с проблемой, что плагин отказывается нормально работать в Mozila и только в ней, он нормально стилизирует селект, но значения не передаются в урл. Вот тут фильтрация товаров http://yzor.com.ua/clothing
    При отключении плагина все работает нормально. В чем может быть проблема?

  3. Приветствую!
    Очень заинтересовал ваш плагин, и я бы хотел прикрутить его к своему форуму на движке phpBB, единственное — не хватает рабочей функции — «Отметить все / Снять выделение» (возможно, вы подскажете решение с 1 чекбоксом для массового выделения), а родная функция не работает, т.к. нет клика по чекбоксу…
    Вот пример таблицы:

    <form name="ucp" id="ucp" method="post" action="ucp.php">
    <table width="100%" cellspacing="1">
    <tr>
    <td class="cat" colspan="2">
    <a href="#" onclick="marklist('ucp', 't', true); return false;">Отметить все</a> :: <a href="#" onclick="marklist('ucp', 't', false); return false;">Снять выделение</a></td>
    </tr>
    <tr class="bg">
    <td><input type="checkbox" class="styled" name="t[10]" id="1" value="1"></td>
    <td>Строка 1</td>
    </tr>
    <tr class="bg">
    <td><input type="checkbox" class="styled" name="t[20]" id="2" value="1"></td>
    <td>Строка 2</td>
    </tr>
    <tr class="bg">
    <td><input type="checkbox" class="styled" name="t[30]" id="3" value="1"></td>
    <td>Строка 3</td>
    </tr>
    </table>
    </form>

    Также хотелось бы чтобы при выборе (и одиночном, и массовом) также менялся класс, это для подсвечивания всей строки…

    Сможете помочь с этими проблемами? :) Я не особо шарю в jQuery, поэтому сам разобраться не смог пока…

  4. Привет

    Отличный плагин. Реально то что искал (uniform все еще используем, но селект у тебя шикарный)

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

    переписали код не много

    if (typeof option. eq (i).attr ('selected') ≠= 'undefined' && option. eq (i).attr ('selected') ≠= false) {selected = ' class="selected sel"';}

    и все заработало. решили поделиться с вами.

    С уважением, Команда Dreamvention
    www.dreamvention.com

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

  6. при использовании select’ов внутри ui. dialog select разворачивается внутри диалога, а не поверх него (как стандартный тэг).

  7. У меня если выбрать чекбокс, то выполняется функция в onclick, которая отправляет name, value, id на проверку AJAX и возвращает либо отмеченным, либо выключенным
    Как тут быть? Установил чисто стилизацию чекбоксов (все остальное не нужно). Но при выборе не работает onclick
    Я нубоват в этом. Может не правильно что делаю?

    • Вместо onclick используйте onchange.

      • Вот спасибо!

        Но столкнулся вот еще с чем. чекбокс имеет атрибут title в котором прописано для чего он. Собственно, нет текста рядом с чекбоксами.
        Так вот вопрос в том, как передать title в формируемый span?

        • Оберните чекбокс в какой-нибудь дополнительный тег (например, в span) и уже ему назначьте этот атрибут.

          • Спасибо.
            Все. понял. Вроде правильно.

            я взял только скрипт стилизации чекбоксов.
            В функции checkbox просто

            $(this).attr('title')

            возвращает содержимое атрибута title.
            Проблема решилась.

            ps. я чекбоксы заменяю на квадратики цветные. цвета берутся из настроек и я каждому чекбоксу в title сунул код цвета, типа #780 000. а этот цвет уже

            <span class="checkbox" style="display:inline-block;background:'+$(this).attr('title')+';"></span>

            Собственно, нашел альтернативный способ использования скрипта вашего))

  8. Как-нибудь можно исключить мультиселекты из обработки плагина, чтобы обычные стилизовались, а мульти оставались без изменений?
    А то в некоторых формах неудобно без множественного выбора…

  9. Поддерживает атрибут multiple, т. е. не позволяет выбирать несколько пунктов (мультиселект).

    Нужно поправить «не позволяет выбирать несколько пунктов»

  10. $('select.styler').styler ();

    При такой конструкции новый скрипт v1.2 не хочет стилизовать мультиселект (судя по коду, он присваивает какой-то «левый» класс псевдоселекту, поэтому в результате на странице видны только пункты выбора) — пришлось откатиться на v1.1.3…

    Это код v1.2:

    <span class="selectMultiple jqselect" style="display:inline-block"><ul style="height: 48px;"><li unselectable="on" style="-webkit-user-select: none;">Выбрать группу</li><li unselectable="on" style="-webkit-user-select: none;">Модераторы</li></ul></span>

    В общем ерунда какая-то… Поправьте скрипт, пожалуйста…

  11. Скажите пожалуйста, можно ли как-то отключить * умное позиционирование * при подключении плагина? Необходимо, чтобы селекты всегда раскрывались вниз.

    • Это можно сделать только путем удаления следующей части кода:

      var topOffset = selectbox.offset().top;
      var bottomOffset = $(window).height() - selectHeight - (topOffset - $(window).scrollTop());
      if (bottomOffset < 0 || bottomOffset < liHeight * 6)	{
      	dropdown.height('auto').css({top: 'auto', bottom: position});
      	if (dropdown.outerHeight() > topOffset - $(window).scrollTop() - 20 ) {
      		dropdown.height(Math.floor((topOffset - $(window).scrollTop() - 20) / liHeight) * liHeight);
      	}
      } else if (bottomOffset > liHeight * 6) {
      	dropdown.height('auto').css({bottom: 'auto', top: position});
      	if (dropdown.outerHeight() > bottomOffset - 20 ) {
      		dropdown.height(Math.floor((bottomOffset - 20) / liHeight) * liHeight);
      	}
      }
      
  12. Здравствуйте. Подскажите, почему может не работать код для нескольких селектов. Т. е. он применяется лишь для первого. А для остальных нет. Не могу понять в чем дело.

  13. Использую друпал. Вот страница triatest.ru/all_in_map?obj=flats&term1=1&term2=5. Применяю для всех селектов в принципе. Применяется только к первому почему-то (:

    В консоли фаирбага ошибка мол
    TypeError: $(document).on is not a function

    В строке
    $(document).on ('click', function (e) {

    Возможно это друпал чето режит… Но не получается разобраться…

  14. Было бы круто, если б у селект листов можно было бы задавать заголовок по умолчанию… Типо как сделано в плагине chosen harvesthq.github.com/chosen/. Т. е. типо вместо лейбла, написано прямо на селект листе, например --Выберите страну-- и при этом, данное значение в самом селект листе отсутствует, и как только что-то выбираем, это значение меняется тем, что выбрали.

  15. А можно ли с помощью вашего плагина сделать 2 разностилизованных селекта на одной странице.
    Просто у меня в дизайне два вида селектов и выглядят они по разному.

  16. Здорово, но не подошло, потому что нельзя управлять размером checkbox-а

  17. В демке у вас обрабатывается клик по кнопке для input[type="file"] в состоянии disabled.
    Конкретнее:
    — идем на http://dimox.github.com/formStyler/demo/
    — «Поле для выбора файла» переключаем в неактивное состояние
    — кликаем по «Выбрать»

    Происходит открытие окна выбора файла. Это явно не правильное поведение для данного состояния.
    Firefox 17.01 / Windows 7

  18. Здравствуйте. Установил плагин, всё работает, но теперь на странице не сворачивается назад спойлер в новости и неактивна функция вставки смайлов в комментарии. Сайт DLE. В чём может быть проблема?

  19. Жаль, спасибо за плагин.

  20. Здравствуйте!

    Помогите с такой проблемой. После динамической генерации селектов из шаблона jquery (10 секций по 8 селектов в каждой + 15 опций в каждом селекте) firefox начинает виснуть. В других браузерах подобной проблемы нет. Пример кода:

    $(«select[name=chambres_number]»).change (function (){
    var v = parseInt ($(«select[name=chambres_number]»).val ());
    for (var i = 1; i < v; i++) $(«#chambres»).append ($(«#chambreTemplate»).render ({item:i+1})); $(«#chambres select»).styler (); });

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