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 601)
  1. 1
    stud

    Привет, как этот плагин, а именно SELECT работает с формами, как получить значение value передать его методу POST???? AJAX????

  2. 3
    Андрей

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

  3. 9
    Firebreather

    Приветствую!
    Очень заинтересовал ваш плагин, и я бы хотел прикрутить его к своему форуму на движке 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. 12

    Привет

    Отличный плагин. Реально то что искал (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. 18
    sinneren

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

  6. 20
    de1phi

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

  7. 28
    Андрей

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

  8. 33
    Firebreather

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

  9. 36

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

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

  10. 38
    Firebreather

    $(‘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. 43
    Света

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

    • 44

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

      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. 46
    bigferumdron

    Здравствуйте. Подскажите, почему может не работать код для нескольких селектов. Т.е. он применяется лишь для первого. А для остальных нет. Не могу понять в чем дело.

  13. 48
    bigferumdron

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

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

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

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

  14. 51
    bigferumdron

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

  15. 53
    Zero

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

  16. 56
    Lirik

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

  17. 58

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

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

  18. 61
    GalaxyFox

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

  19. 65
    GalaxyFox

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

  20. 66
    Юрий

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

    Помогите с такой проблемой. После динамической генерации селектов из шаблона 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(); });

  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');
    	}
    });
    
Ваш комментарий