Главная 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 бага в версии 1.6.1
    1) Селект с замещающим текстом (placeholder)
    если кликнуть на селект и нажать на любую клавишу на клавиатуре, то текст плейсхолдера пропадает
    строка 682
    2) Если селект находится внизу страницы, то scrollTop у «.jq-selectbox__dropdown ul» тоже прокручен вниз и первых элементов не видно.
    Чтобы это проследить нужно страницу прокрутить вниз, скролл поместить за 200px от низа браузера (добавить побольше option-в чтобы скрол был у списка)
    у себя на сайте это исправил так:
    onSelectOpened: function () {
    var ul = $(this).find ('ul');
    setTimeout (function (){ul.scrollTop (0)}, 1);
    }

    PS классный плагин, спасибо

  2. Здравствуйте Dimox спасибо большое за плагин,
    Но есть проблема и непонимаю вообще как в таком плагине она может присутствовать, если инспектировать код то checked не ставится, ставится класс оболочке, но checked не ставится, как так? в safari я инспектором проверял и в мозиле так же через файрбаг, подскажите пожалуйста в чем дело?

  3. А есть ли деструктор?

  4. Добрый день, Dimox!

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

    Пример моего кода http://jsfiddle.net/wnesx8hw/2/

  5. Уже голову сломал — почему так происходит???
    i.imgur.com/LOBA3Su.png

  6. Спасибо, вроде разобрался… Этот overflow меня постоянно в ступор вводит))) Только теперь другая проблема, как сделать, что бы пункты в dropdown не переносились на другую строку? Пробовал nowrap и другие — не помогает… Уже и не знаю что ещё можно. Подскажите)
    i.imgur.com/tWP27ch.png

  7. Перечитал все сообщения с первой страницы, но, так и не нашел ответа на свой вопрос.
    Суть проблемы: при выборе Страны, во втором селекте не отображаеются Регионы/Области.
    Вот как они отображаются:

    <div id="country_id">
    <select name="country_id">
                  <option value=""><?php echo $text_select; ?></option>
                  <?php foreach ($countries as $country) { ?>
                  <?php if ($country['country_id'] == $country_id) { ?>
                  <option value="<?php echo $country['country_id']; ?>" selected="selected"><?php echo $country['name']; ?></option>
                  <?php } else { ?>
                  <option value="<?php echo $country['country_id']; ?>"><?php echo $country['name']; ?></option>
                  <?php } ?>
                  <?php } ?>
                </select>
    </div>
    

    Пробовал подключить Ваш плагин вот так:

    <div id="zone_id">
    <select name="zone_id">
                </select>
                <?php if ($error_zone) { ?>
                <span class="error"><?php echo $error_zone; ?></span>
                <?php } ?>
    </div>
    

    Не получается… Подскажите решение.
    Спасибо.

  8. Уважаемый Dimox, подскажите КАК мне два связанных селекта «подружить»?
    Очень нуна (мой код выше — в сообщении #1704)
    Уже как только не пробовал:

    <script>  
    (function($) {  
      $(function() {  
      $('select').selectbox();  
      $('#country_id').change(function() {  
      $('#zone_id').trigger('refresh');  
      });
      })  
    })(jQuery)  
    </script> 

    Ума не приложу…

    i.imgur.com/cGWUUmX.png

  9. В общем, я отказался от этого плагина. Не знаю почему, но со связанными (зависимыми) селектбоксами от работать отказывается. Тогда как, со всем остальным всё прекрасно работает. Очень жаль, что никто не смог помочь ((

    • Вы просто не правильно используете.

      Вы используете старый плагин, а Вам нужно скачать новую версию с этого сайта, далее

      <script>   
      (function($) {   
      $(function() {   
      $('select').selectbox();   
      $('#country_id').change(function() {   
      $('#zone_id').trigger('refresh');   
      });  
      })   
      })(jQuery)   
      </script>   
      

      заменить на

      <script>   
      (function($) {   
      $(function() {   
      $('select').styler();   
      $('#country_id').change(function() {   
      $('#zone_id').trigger('refresh');   
      });  
      })   
      })(jQuery)   
      </script>   
      
  10. Подскажите почему может не работать селект в iPhone. Не раскрывается просто. Display block и z-index не добавляются. В десктопе и на адройде все ок.

  11. Здравствуйте! Вопрос по производительности. Имею на странице примерно 30 селектов, в которых около 1000 значений. Их стилизация занимает 4−5 секунд, что совсем не годится. Возможно ли что-то сделать чтобы загрузка происходила быстрее? Если нет, то не подскажете ли более простые плагины с ограниченным функционалом (интересует изменение цвета опшенов, указание через css работает не во всех браузерах)? Спасибо

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

    {literal}<script language="javascript">
    function usedefaultns() {
        jQuery(".domnsinputs").attr("disabled", true);
    }
    function usecustomns() {
        jQuery(".domnsinputs").removeAttr("disabled");
    }
    jQuery(document).ready(function(){
    {/literal}{if $defaultns}usedefaultns();
    {/if}
    {literal}});
    </script>{/literal}
    
    <li>
    										<input type="radio" name="nschoice" value="default" id="nschoicedefault" onclick="usedefaultns()"{if $defaultns} checked{/if} /> 
    										<label for="nschoicedefault">{$LANG.nschoicedefault}</label>
    									</li>
    									<li>
    										<input type="radio" name="nschoice" value="custom" id="nschoicecustom" onclick="usecustomns()"{if !$defaultns} checked{/if} /> 
    										<label for="nschoicecustom">{$LANG.nschoicecustom}</label>
    									</li>
    
    

    после того как застилил формы, скрипт не отрабатывает :(
    самостоятельно бился два дня и ничего не вышло, подскажите пожалуйста как быть?

  13. Приветствую, скринт не стилизирует select с multiple, те при включениии multiple, в окне со списком просто появляются стрелочки, а выпадающего списка нет, как при использовании без multiple, как быть то?

  14. Dimox
    С мультиселектом разобрался, появилась новая проблема, у меня сайт на движке DLE, и в нём используются доп поля, а так же установлен загрузчик фото и файлов из доп полей (модуль), так вот при подключении скрипта

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

    Не работает загрузчик фото, не открывается окно загрузки

  15. если кто-то вдруг захочет использовать данный плагин в rails:

    Используем плагин через rails-assets.org, который подружит bower плагин с bundler (кстати, у тебя какой-то не кошерный bower. json)

    Gemfile:

    source 'https://rails-assets.org' do
    gem 'rails-assets-jquery.form-styler'
    end

    Подключаем в application. js сам файл:

    //= require jquery.form-styler/jquery.formstyler

    И всё :)

  16. Здравствуйте.
    Плагин отличный, все супер. Вот только столкнулся с проблемой. У меня в селекте присутствует onclick в option

    <option onclick="location.href='/kratki'" value="Kratki (Польша)">Kratki (Польша)</option>

    Который при выборе производителя ведет на его страницу.
    А данный плагин не поддерживает данное свойство. Можно ли как-то дописать его, чтобы он onclick прибавлял в li. Например

    <ul><li><a href="#" onclick="location.href">текст</a></li></ul>
    • Можно сделать следующим образом:

      <select class="with-data">
      	<option data-href="/kratki" value="Kratki (Польша)">Kratki (Польша)</option>
      </select>
      
      $('div.with-data li').click(function() {
      	location.href = $(this).data('href');
      });
      

      Не тестировал, но по идее должно работать.

  17. Добрый вечер, есть небольшая проблема, а именно не передаются аттрибуты data-* у option. Есть следующий код:

    <select>
    <optgroup label="name">
    <option data-value="name1">name 1</option>
    <option data-value="name2">name 2</option>
    <option data-value="name3">name 3</option>
    </optgroup>
    </select>
    

    при таком формате аттрибут data-value не передастся в li, после запуска styler, а вот если убрать обертку из optgroup — то data-value передастся… Подскажите — это я не правильно что-то делаю или баг плагина?

    • Это недоработка в плагине. Я забыл добавить соответствующий код для данного случая. В следующей версии будет исправлено. Спасибо, что сообщили.

      Нужно всего лишь заменить эту строку:

      li = '<li' + dataJqfsClass + ' class="' + liClass + optionClass + ' option' + optgroupClass + '">'+ option.eq(i).html() +'</li>';

      на такую:

      li = '<li' + dataJqfsClass + dataList + ' class="' + liClass + optionClass + ' option' + optgroupClass + '">'+ option.eq(i).html() +'</li>';
  18. Возможно отвечали, но все же — как принудительно сделать открывание вверх. У меня селект в футере и сам он не хочет вверх открываться.
    Спасибо.

  19. пример: Селект с шириной 200 пикселей, имеющий пункт с длинным текстом.

    не могу понять как сделать ширину дропдайна динамичной относительно самого широкого пункта, когда селект имеет заданную ширину.

    пишу как в примере

    -- Выберите --
    Пункт 1
    Пункт 2
    Какой-то пункт с очень-очень-очень длинным-длинным-длинным текстом
    Пункт 4
    Пункт 5

    css:
    .jq-selectbox.width-200 {
    width: 200px;
    }

    но дропдаун всё равно шириной как задан селект 200px

  20. Подскажите пожалуйста, как стилизовать динамический select?

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