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>; Содержание: Демонстрация работы плагина Достоинства Недостатки Скачать Подключение плагина Отключение плагина (метод destroy) ...

Полезные комментарии (10)
Комментарии (2 269)
  1. 1
    Дарья

    Добрый день!
    Возник такой вопрос — есть ли какие-то ограничения при использовании с Django templates (django==1.4.11)?
    Проблема в том, в select’е не работает аттрибут data-placeholder.

    Пробовала по-разному:
    c data-placholder и пустым первым option (последний ответ Zack Jordan)
    только с data-placeholder (как в доках)
    Оба варианта не работают.

    В первом случае (с пустым option) при загрузке страницы вместо подсказки — пустое поле, и оно отображается в выпадающем списке (при этом текст внутри div.jq-selectbox__select-text пустой и класс placeholder к этому div’у не применился).

    Во втором — вместо подсказки выводится первый элемент из options select’а (он же внутри div.jq-selectbox__select-text, и класс placeholder тоже не применился).

    Вот пример использования:

    <select data-placeholder="Выберите регион" class="..." id='location' name="{{ form.location.html_name }}">
     <option></option> <!-- Во втором варианте без этой строки -->
     {% for id, name in form.location.field.choices %}
     <option value="{{ id }}"{% if form.location==id" %} selected{% endif %}>{{ name }}</option>
     {% endfor %}
    </select>
    

    Интересно что, для самого простого примера, без тегов джанги, также не работает.

    • 2

      На странице примеров все работает, значит причина где-то у вас. И непонятно, при чем здесь плагин chosen, ссылки на который вы даете.

      Возник такой вопрос — есть ли какие-то ограничения при использовании с Django templates (django==1.4.11)?

      Не знаю, я не знаком с Django.

  2. 3

    Возникла трудность с плагином, в селектах не работает поиск. Консоль пустая, даже не знаю в какую сторону копать. Возможно, есть какие-то распостраненные ошибки по этому поводу?

  3. 7
    shaman

    проблемка такая:

    есть страничка с кодом

    Выбрать
    111
    222
    333

    111
    222

    На новой html страничке все работает, а вот как с вашим плагином получить доступ к (option value=»1″) чтобы установить ему атрибут (‘selected’,’selected’)»

    Заранее благодарен )

  4. 8
    shaman

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

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

    Здравствуйте, при динамическом select’е когда подгружается зависимый select изменяется его ширина, становится равная самому длинному пункту.
    Указываю $(«#subcategory»).css({‘min-width’:’337px’, ‘max-width’:’337px’}) не работает.

  6. 15
    Дмитрий

    У меня селект в Хедере, соответственно распространяется влияние на селекты на страницах. Как защитить другие селекты от изменений?

  7. 17
    Kenny

    С версией жиквери 3.1.1 селект изначально открывается вверх. Пробовал версию 2.1.1 — все норм. Как исправить?

  8. 20
    Вячеслав

    Можно ли запретить обработку отдельных элементов этим плагином? Например, добавив класс jq-disable?

  9. 22
    Александр

    Мобильные устройства не поддерживаются?

  10. 24
    Slava

    Возникла небольшая проблема с селектами. Когда подключаю плагин, то selected значение не передается в POST-запрос. Если пинговать селект alert’ом при событии onchange то значение показывается правильно. Если же убрать кастомизацию селекта, то значения в POST передаются нормально.
    Подскажите, пожалуйста, в какую сторону копать, второй день уже борюсь с этим багом.

    • 25
      Still

      Тоже пришел из-за этой проблемы. Но разобрался в своей проблеме сам — у меня форма обьявлялась в первой ячейке таблицы, в последующих были текстовые и селекты, в последней форма закрывалась. Было всё 1 в 1 по вашему описанию. Это, насколько я понял, не корректное пересечение моделей DOM. Вынес обьявление формы «уровнем выше» — все заработало.

  11. 26
    Александр

    Здравствуйте люди добрые! Нужна помощь! Не могу разобраться как подключить плагин к связанным динамическим селектам. Прочитал все комменты от корки до корки испробовал все советы но видимо делаю что то не так. Есть три селекта. При загрузке страницы плагин подключается и работает.. но при изменении первого второй селект принимает стиль по умолчанию. Пробовал вставить в скрипт вот это jQuery.ajaxSetup({complete: function(){jQuery(«select»).styler(); }}); но срабатывает только при повторном нажатии на первый селект.
    Вот пример моего кривого кода..
    Sect.php

     <script language="javascript">
    var request;
    var dest;
     
    function processStateChange(){
     if (request.readyState == 4){
     contentDiv = document.getElementById(dest);
     if (request.status == 200){
    response = request.responseText;
    contentDiv.innerHTML = response;
     } else {
    contentDiv.innerHTML = "Error: Status "+request.status;
     }
     }
    }
     
    function loadHTML(URL, destination){
     dest = destination;
     
     if (window.XMLHttpRequest){
     request = new XMLHttpRequest();
     request.onreadystatechange = processStateChange;
     request.open("GET", URL, true);
     request.send(null);
     } else if (window.ActiveXObject){
     request = new ActiveXObject("Microsoft.XMLHTTP");
     if (request) {
    request.onreadystatechange = processStateChange;
    request.open("GET", URL, true);
    request.send();
     }
     }
    }
    
    </script>
    <script>
    (function($) {
    $(function() {
    
     $('input, select').styler();
    
    });
    })(jQuery);
    </script>
    
    <? CModule::IncludeModule("iblock");
     
     $IBLOCK_ID=8;
     $str = "";
     $str .= "<select class=\"sort-list-select1\" name=\"SECTION_ID\" id=\"q1\" onchange=\"loadHTML('/structura/ajax.php?id='+this.options[this.selectedIndex].value,'label');\" >";
     $str .="<option>Выбор марки</option>";
     
     $arFilter = Array('IBLOCK_ID'=>$IBLOCK_ID, "DEPTH_LEVEL" => 1, 'GLOBAL_ACTIVE'=>'Y');
     $db_list = CIBlockSection::GetList(Array("NAME"=>"ASC"), $arFilter, true);
     while($ar_result = $db_list->GetNext())
     {
     $str .= "<option value=\"".$ar_result['ID'] ."\">".$ar_result['NAME']."</option>"; 
     }
    ?>
    <div class="sort-form">
    
    <form>
     <table class="sort-list-table">
     <tbody><tr>
     <td>Выберите мотоцикл</td>
     <td><?=$str?></td>
     <td>
     <div id="label">
     <select id="q2" class="sort-list-select2" name="element">
     <option value="empty">Выбор объёма</option>
     </select><div>
     </div></div></td>
     <td>
     <div id="label3">
     <select id="q3" class="sort-list-select3" name="element3">
     <option value="empty3">Выбор модели</option>
     </select>
     <div>
     </div></div></td>
     </tr>
     
     </tbody></table>
    </form>
    
    </div><br> 

    Файл ajax.php

    <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
    
    
    
    
     <? CModule::IncludeModule("iblock");?>
    <?
    $IBLOCK_ID=8;
    
     $arSelect = Array("ID", "NAME","IBLOCK_SECTION_ID");
     $arFilter = Array("IBLOCK_ID"=>$IBLOCK_ID, "DEPTH_LEVEL" => 2, "ACTIVE_DATE"=>"Y", "SECTION_ID"=>$_GET["id"]);
     $res = CIBlockSection::GetList(Array("sort" => "asc"), $arFilter, true);
     
     $arResult = "<select class=\"sort-list-select1\" name=\"element\" id=\"q2\" onchange=\"loadHTML('/structura/ajax1.php?id='+this.options[this.selectedIndex].value,'label3');\" >";
     $arResult .="<option value=\"empty\">Выбрать объём</option>";
     
     
     while($ob = $res->GetNextElement())
     {
     $arFields = $ob->GetFields();
     $arResult .= "<option value=".$arFields ['ID'].">".$arFields ['NAME']."</option>"; 
     }
     $arResult .="</select>"; 
    
    echo $arResult;
    
    
    ?>
    
    
    
    <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php");?>

    файл ajax1.php

    <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
    
    
    
    <?CModule::IncludeModule("iblock");?>
    <?
    $IBLOCK_ID=8;
    
     $arSelect3 = Array("ID", "NAME","IBLOCK_SECTION_ID");
     $arFilter3 = Array("IBLOCK_ID"=>$IBLOCK_ID, "DEPTH_LEVEL" => 3, "ACTIVE_DATE"=>"Y", "ACTIVE"=>"Y", "SECTION_ID"=>$_GET["id"]);
     $res3 = CIBlockSection::GetList(Array("NAME"=>"ASC"), $arFilter3, true);
     
     $arResult3 = "<select class=\"sort-list-select1\" name=\"element3\" onchange=\"window.location.href=this.options[this.selectedIndex].value\">";
     $arResult3 .="<option value=\"empty3\">Выбрать модель</option>";
     
     while($ob3 = $res3->GetNextElement())
     {
     $arFields3 = $ob3->GetFields();
    	 
     $arResult3 .= "<option value=".$arFields3 ['SECTION_PAGE_URL'].">".$arFields3 ['NAME']."</option>"; 
     }
     $arResult3 .="</select>"; 
    
    echo $arResult3;
    
    ?>
    
    
    
    
    
    
    <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php");?>
  12. 27

    Привет. Спасибо за плагин, пользуюсь давно и очень доволен.
    Недавно написал модуль для друпала, который позволяет подключать твой плагин к любому сайту на этой CMS. Вот ссылка на него https://www.drupal.org/project/form_styler при установке модуля, плагин скачивается с твоего репозитория. Можешь в описании добавить ссылку на модуль. Настройки опций плагина из админки Drupal-а в работе. Выгружу как завершу и протестирую. Еще раз спасибо за плагин и свободную лицензию =)

  13. 28
    Андрей

    Добрый день, подскажите такой момент по плагину… Если выбирать из выпадающего списка значение, то свойство $(this).val() доступно и не пустое, но если в дропдауне больше 400 значений, естественно хочется воспользоваться поиском. И вот когда в поисковом поле после ввода 3-4 символов остаются нужные значения (например, города), ты кликаешь по нужному пункту и $(this).val() пусто!!! Потому что у в списке нет никаких аттрибутов. Вопрос — как в «поисковом поле» дропдауна при выборе получать не пустое значение. Смысл же select’a в том, чтоб значение куда-то отправить или сохранить, а не для красоты. Спасибо

    • 29

      Только что проверил на странице примеров, где вариант с onchange="alert(this.value)". Добавил туда много пунктов, ввожу символы в поиске, после клика на пункт он мне показывает alert. Не знаю, что не так у вас.

      • 30
        Андрей

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

          • 32
            Андрей

            Похоже, вы правы, у меня на локальной машине тоже в обоих, значит фреймворк Yii что-то «портит» или перекрывает(( не срабатывает какое-то событие в фильтрах CGridView! Если кто-то это читает и сталкивался — подскажите, пожалуйста :) спасибо

          • 33
            Максим

            Встретился со схожей проблемой, возможно как-то неправильно используете js, вот пример разбора ошибки:

            <select class="js-calculator__type">
            $(document).ready(function(){
             //селектор для select-а
             var $classSelector = $('.js-calculator__type');
            
             //какой-то произвольный DOM-элемент
             var $custom = $('.custom-selector');
            
             //событие которое использует $classSelector.val()
             $custom.on('custom-event', function(){
             console.log($classSelector.val());
             });
             //но в $classSelector 2 элемента
             //первый - обертка для SELECT-а
             //второй - сам SELECT
             //$classSelector.val() - берет value первого элемента из набора
             //поэтому
             //или изначально пишем селекторы как-то так
             $classSelector = $('select.js-calculator__type');
             //или
             $classSelector = $('.js-calculator__type').not('jq-selectbox');
             //или проверяем элемент набора перед тем как брать его val()
             
            });
            
  14. 34
    Евгений

    Подскажите пожалуйста! Поставил плагин стилизации селектов и в форме регистрации перестал открываться селект с выбором региона, в остальных местах везде работает. Через консоль пишет TypeError: jQuery(…).ready(…) is not a function , как исправить эту проблему?

  15. 35
    Anrew

    Подскажите, а как можно повесить раскрытие селекта при клике по ссылке или какому нибудь label?

    • 36
      Сергей

      Поддерживаю вопрос. Способы, что не помогли:
      — навешивание классов .addClass(‘dropdown’).addClass(‘opened’).addClass(‘focused’) на .jq-selectbox
      — клики на .jq-selectbox и его потомков + принудительный показ .jq-selectbox__dropdown

  16. 37
    Diana

    Здравствуйте, хотела бы узнать, етсь ли поддержк tabindex?

  17. 39
    Илья

    Подскажите как сбросить каждый селект по одиночке?, при этом не использовать кнопку reset

  18. 41
    Денич

    Подскажите, как убрать значение option из выпадающего списка при его выборе ?

    Т.е например мы имеем выпадающий список:
    Значение 1 — выбранное значение

    Это открывающийся список:
    Значение 1
    Значение 2
    Значение 3
    Значение 4

    Чтобы при открытии не было в данном списке Значение 1, а если выбираем Значение 2, то соответсвенно из списка оно исчезает и отображается в выбранном значении и т.д с другими значениями.

  19. 43
    rodigy

    Заметил баг небольшой, если динамически изменять селект: очистить все содержимое селекта и вставить это

    <option disabled>text</option>

    , то получим селект без текста.
    http://www.openscreenshot.com/rkhC_Ckdl

  20. 44
    rodigy

    Как сделать полностью неактивным селект, чтоб нельзя было нажать на него и не выпадало drop-down меню если есть лишь 1 disabled option ??

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