adminvps

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 588)
  1. 1
    Alex

    .jq-selectbox__select-text {
    display: block;
    width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }

    Если ширина блока переопределяется где-то через .jq-selectbox.width-xxx и при этом там используется !important
    (… ну мало-ли сколько там будет правил, перекрывающих друг-друга)

    .jq-selectbox.width-245 { width: 245px !important; }
    .jq-selectbox.width-120 { width: 120px !important; }

    то при длинном тексте width: 100% недостаточно — текст вылазит за пределы select’a

  2. 3
    Артем
    @

    Шикарный плагин! Спасибо!

  3. 4
    Дмитрий

    Добрый день.
    Спасибо за скрипт.
    Не работает демо тут:
    http://dimox.github.io/jQueryFormStyler/demo/

  4. 6
    Алексей

    Спасибо за такой замечательный плагин. Установил, настроил всё супер, но заметил один момент, что если я в select-е первый option делаю disabled то он не отображается (вернее отображается но уже когда селект раскрывается). Отображается сразу следующий и так далее. Первый просто игнорируется. Может что не так делаю. Dimox подскажи плиз)

  5. 11
    Андрей

    Есть вопрос, можно ли будет , когда то добавить в селект placeholder, ну например что он был виден, но когда открываешь, его в списке небыло, если ничего не выбрал и закрыл, он остался, но если чтото выбрал он конечно пропал. Чтото типа дефолтного текста в спане текст, например, если data-title у стандартного селекта указан из него брать етот текст, если нет то как раньше.

  6. 13
    Алексей

    Как правильно сделать width селекту? Или его размер ставится только в зависимости от самого широкого элемента?

  7. 22
    Alex
    @

    Такая вот штука. Понимаю что возможно стандартный селект и имеет такое поведение но у нас же не стандартный.
    Этот селект работать не будет

    <select class="select b-odetalis__filter-dropdown">
     <option value="" class="b-odetalis__filter-dropdown-icon_g"></option>
     <option value="" class="b-odetalis__filter-dropdown-icon_mr"></option>
     <option value="" class="b-odetalis__filter-dropdown-icon_ym"></option>
    </select>
    

    Нужно чтобы option содержало хоть какой то текст. &nbsp; те помогает

    <select class="select b-odetalis__filter-dropdown">
     <option value="" class="b-odetalis__filter-dropdown-icon_g">1</option>
     <option value="" class="b-odetalis__filter-dropdown-icon_mr">2</option>
     <option value="" class="b-odetalis__filter-dropdown-icon_ym">3</option>
    </select>
    
  8. 25
    Дима

    Привет. Можешь подсказать, есть ли какой-то способ стилизовать скролбар в выпадающем списке селекта? вот как должно быть http://prntscr.com/365nmc

    заранее спасибо за ответ!

  9. 28
    RuSS_lan
    @

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

  10. 31
    Alexander

    Отличный плагин, часто пользуюсь, спасибо!

    Недавно столкнулся с такой багой — на айпадах/айфонах при выборе селекта, плагин не срабатывает, его дропдаун не открывается и, видимо, не добавляются нужные классы opened и changed, т.к. после выбора, селект не стилизуется в соответствии с ними. Вместо дропдауна вылезает нативный айпадовский селект.

  11. 38
    Алексей

    Странное поведение плагина.
    При клике, на элемент проверяю есть ли дочерние (отдельный объект взаимосвязей), если есть переключаю их тоже.

    Проблема в том что 2 раза .trigger(‘refresh’) срабатывает, а потом перестает, хотя по коду атрибут checked проставляется и убирается, а вот у div выше перестает появляться класс «checked».

    В чем может быть проблема?

    $(".target input:checkbox").change(function(event) {
     var _id = $(this).attr('element_id');
     if(!$.isEmptyObject(MAP[_id])) {
     var type = 'unselect';
     if($(this).prop("checked")) {
     type = 'select';
     }
     $(MAP[_id]).each(function(i, id) {
     if(type == 'select') {
     $(".target input[element_id='" + id + "']").attr('checked', true).trigger('refresh');
     }
     else {
     $(".target input[element_id='" + id + "']").removeAttr('checked').trigger('refresh');
     }
     });
     }
    });
    
  12. 43
    Кирилл

    Добрый день. Подскажите, при динамическом создании элементов не срабатывает обработчик клика.
    http://screenshot.su/show.php?img=c38ea6ef616b934519032f0a9c65c496.jpg
    проблема с селектом 2. Селект работает до того, как покликать на чекбоксы 1. — после этого селект 2 перестает работать
    Триггер рефреш отрабатывает, но без толку
    посмотреть можно — http://www.e1точкаtbox24.ru/ — 71 строка кода в фаербаге

  13. 47
    Алексей

    Здравствуйте! Подскажите, что я не так делаю?

    В общем после загрузки файла, мне нужно обновить select, добавить туда option с именем файла который был только, что загружен. Консоль показывает, что option добавлен, а вот сам селект не обновляться.

    $('select').append('<option value="'+data['file_name']+'">'+data['file_name']+'</option>').trigger('refresh');
    
  14. 53
    Krio

    Хороший плагин, но если уж взялись поддерживать формы вы хоть плейсхолдер добавьте в 9-8 ие нечего сложного в этом нет спасибо.

  15. 54
    BaranPHP

    Доброго дня. Спасибо за скрипт. Всё очень удобно и красиво. Помогите советом пожалуйста. Имею два разных выпадающих списка. Хотел бы их оформить по разному. Как это можно реализовать?

    Подскажите как прикрутить разные стили CSS.

  16. 56

    Доступна новая версия плагина — 1.5.

  17. 57
    Yoru

    Здравствуйте!
    Решила попробовать ваш чудесный плагин и вроде всё отлично, но почему-то стили для input’ов не применяются( Что я делаю не так?

    Вызываю так, как написано в статье выше:

     <script> 
     (function($) { 
     $(function() { 
     
     $('input, select').styler(); 
     
     }) 
     })(jQuery) 
     </script> 
  18. 64
    Дима

    Добрый день.. на ipad вообще не открываются селекты, в чем может быть причина?

  19. 66
    Роман

    Здравствуйте Дмитрий.

    Спасибо за ваш труд.

    Возникла проблемка.

    Верстаю калькулятор(http://tk.bricrb.by/calc.html), вверху где Пункт отправки и Пункт назначения селект нормально отображается (при раскрытии), но когда идем дальше (ставим галочку Негабаритный груз, Нажимаем ссылку АВТОЭКСПЕДИРОВАНИЕ, ставим галочку От двери) селект при открытии некоректно отображается, а имеенто автоматом проставляет маленькую ширину эллементу

    element.style {
     bottom: auto;
     display: block;
     height: auto;
     left: 0;
     position: absolute;
     top: 33px;
     width: 12.2333px;
    }
    

    С чем это может быть связанно?

    P.S. в jq я пока нуб

  20. 69
    stryukov

    Мне кажется уже пора делать поиск по комментам или отдельный форум для вопросов и обсуждений. А вопрос у меня следующий: как задисейблить кнопку? Сделал как в примере

    $(this).attr('disabled','disabled');

    пробовал и тригер и рефреш и чет не работает. У кнопки то атрибут появился и она задисейблилась, но вот сама кнопка по прежнему нажимается. Подскажите как это сделать. Посмотреть пример можно здесь http://stryukov.net/info.php

    • 70

      Уберите с кнопки класc .styler и тогда увидите, что кнопка становится неактивной. Просто в jquery.formstyler.css отсутствуют стили для неактивной кнопки.

      А триггер рефреш здесь бесполезно использовать, т.к. плагин не трогает такие кнопки. Читайте внимательно, какие элементы стилизует плагин.

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