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 599)
  1. 1

    Выложил новую версию плагина — 1.5.5.

  2. 4
    ЖЕня

    А как открыть селект с помощью JS?
    Делаю связанные селекты… по автомобилям производитель->год->модель

  3. 6
    Вадим

    Если заполнить data-placeholder у select-а и нет пустого тега option, то текста-подсказки «Выберите..» нет. Хотя логически должно быть.

  4. 8
    Александр

    Плохо что нет поддержки IE7. Можно как-то заставить IE7 использовать стандартное оформление?

  5. 11

    версия 1.5.5
    строка №634 «.bind(‘keydown.styler keyup.styler’, function(e) { » про изменение селекта с клавиатуры.
    если в строке убрать keyup.styler, то «открываем выпадающий список при нажатии Space» будет работать
    и проблема закрытия селекта сразу после открытия, будет решена.
    И можно смело раскомментировать строку
    «// divSelect.click();»

    • 12

      но тогда появились проблемы с листанием в нераскрывшемся селекте пунктов и + еще проблемы.
      Поэтому раскрытие селекта при нажатии на пробел вынес отдельно на нажатие клавиши.
      В итоге получилось так:

      // строка №634
      // изменение селекта с клавиатуры
      .bind('keydown.styler keyup.styler', function(e) {
       var liHeight = li.data('li-height');
       divText.text(option.filter(':selected').text());
       li.removeClass('selected sel').not('.optgroup').eq(el[0].selectedIndex).addClass('selected sel');
       // вверх, влево, Page Up, Home
       if (e.which == 38 || e.which == 37 || e.which == 33 || e.which == 36) {
       ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top);
       }
       // вниз, вправо, Page Down, End
       if (e.which == 40 || e.which == 39 || e.which == 34 || e.which == 35) {
       ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top - ul.innerHeight() + liHeight);
       }
       // открываем выпадающий список при нажатии Space
      // перенес отдельно
      //	if (e.which == 32) {
      //		e.preventDefault();
      //		// можно было бы открывать через запуск divSelect.click(),
      //		// но почему-то список после открытия сразу закрывается
      //		// решение пока не найдено
      //		//divSelect.click();
      //									}
       // закрываем выпадающий список при нажатии Enter
       if (e.which == 13) {
       e.preventDefault();
       dropdown.hide();
       selectbox.removeClass('opened');
       // колбек при закрытии селекта
       opt.onSelectClosed.call(selectbox);
       }
      }).bind('keydown.styler', function(e) {
       // открываем выпадающий список при нажатии Space
       if (e.which == 32) {
       e.preventDefault();
       divSelect.click();
       }
      })
      
  6. 14
    Андрей
    @

    Очень понравился Ваш плагин но не хватает поиска и выбора в мультиселекте.

    Скажите, будет ли осуществлена возможность поиска в мультиселекте и выбора пунктов.
    Выбор пунктов можно сделать как здесь, вот только удалять выбранные пункты не backspace & del, а сделать крестик: http://plugins.jquery.com/selectize/
    PS: смотрите в демо.

  7. 17
    Вадим

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

  8. 21

    Выложил новую версию — 1.5.6.

  9. 22
    Сергей
    @

    Здравствуйте.
    Спасибо за работу и поддержку данного плагина.
    Столкнулся с небольшой проблемой
    (скрин удобного объяснения проблемы http://prntscr.com/4l644z ).

    Уменьшив правый падинг с 45px на 25px, ширина выпадающего списка теперь не правильно высчитывается. Есть ли решение этой проблемы?
    Ширина выпадающего списка все равно учитывает правый падинг 45px и тем самым выходит за рамки верхнего блока.
    Буду весьма признателен на любой ваш ответ, за ранение благодарен.

  10. 24
    Сергей
    @

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

  11. 28
    Mikhail

    Заметил небольшой глюк, скорее всего не срабатывает триггер(срабатывает только один раз) — в следующем коде: $(this).attr(«checked», true).trigger(‘refresh’), хотя в самом input атрибут задается, зато с («checked», false) срабатывает всегда.

  12. 32
    Froda

    А вот интересно, это только у меня следующая проблема?
    Предположим есть селект с множеством опций. Их количество такое, что для того чтобы выбрать нужную необходимо перемотать список. Т.е. опция в самом низу и ее позиция вне видимого диапазона при открытии списка. Так вот, если на Android выбирать эту опцию, то выбирается совсем другая, та которая находится на этом месте при открытии списка. Т.е. браузер не понимает, что список перематывается и выбирает то, что было на месте тапа до перемотки. Проверял на Galaxy Tab 10.1
    Можно как-то нативный выбор предлагать при раскрытии списка для Android устройств?

  13. 38
    Евгений

    Просьба, если это возможно, когда срабатывает умное позиционирование для селекта (когда список появляется над ним) добавлять какой-то класс к контейнеру .jq-selectbox. top например. Это нужно для усовершенствования стилизации. Например скругленные края только в нижней части выпадающего списка, а когда список выше, то скругляются верхние края.

  14. 40
    Олег

    У меня получилась очень странная вещь. У меня на сайте много разных элементов на jQuery. Подключил и Ваш. Все работает. Но если сейчас отключить файл jquery.formstyler.min.js, то перестают работать карусели и аккордионы установленные ранее и прекрасно ранее работающие. Не подскажете почему так получается?

  15. 45
    Cript

    Приветствую, у вашего плагина случаем нет такой возможности чтобы не затрагивать определенные блоки по id или еще как нибудь..?

  16. 47
    Вадим

    Добрый день. Подскажите пожалуйста, возможно ли динамически через JS изменять текст selectPlaceholder для селекта? На форме есть два зависимых селекта «Страна-Производитель». Для селектов указан тег data-placeholder=»All» и в каждом по дефолту пустой All. При выборе страны из первого селекта, если Ajax-запрос вернул пустой результат, во вотором селекте нужно текст «All» плейсхолдера поменять на «No Items». Уже перепробывал менять через attr(«data-placeholder», «No Items»), добавлением пустого No Items, trigger(‘refresh’) вконце, но всеравно плейсхолдер не меняется. Пробовал изменять через JS сам текст в All, но jquery по селектору $(«.»jq-selectbox__select-text.placeholder») возвращает вовсе не этот елемент. Спасибо

  17. 50
    Ярослав

    Добрый вечер!

    Пользовался раньше версией 1.4.9. Вчера обновился до 1.5.6 из-за плейсхолдера и обнаружил, что стилизованные чекбоксы перестали наследовать дата-атрибуты. В истории изменений по плагину ничего такого не заметил. Откатился до старой версии, потому что на дата-атрибутах у меня многое завязано.

  18. 52
    Евгений
    @

    Здравствуйте, пользуюсь вашим плагином, довольно крутая штука, вот только возникли загвоздки с полем input=’radio’ , а именно не убираются состояние checked при клике на input=’radio’, в чем может быть проблема?

  19. 55
    c1n1k

    а нет стилей написанных для препроцессора?:)

  20. 59
    Ростислав

    Какая-то проблема с selectPlaceholder. Если его значение не задано и не указан атрибут data-placeholder, то по умолчанию выводится «Выберите…», а первый пункт из селекта вообще не доступен. Как сделать, не задавая этих атрибутов, чтоб по умолчанию уже был выбран первый пункт селекта?

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