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
    oleg

    Сделайте пожалуйста формирование тега «li» в следующих версиях вот таким :

    var rr = option.eq(i).attr(‘class’);
    ddlist += »+ option.eq(i).text() +»;

    тогда все классы написанные для select будут переносится, если например я какие-то select хотел выделить жирным, или картинку сбоку сделать.

  2. 2

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

  3. 5
    Hoodognik

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

  4. 6
    Hoodognik

    Надеюсь не посчитаете за придирчивость или флуд. но Z-index 1000 по-моему черезчур

  5. 8
    artquant

    плагин крутой, нет слов
    добавлю пару инетересный изменений

    var opt = $.extend({
    			browseText: 'Выбрать',
    			singleSelectzIndex: '1000',
    			selectVisibleOptions: 0,
     width: 50 - добавить
    		}, opt);
    

    var selectbox =
    $(»+
    »+
    ‘+
    »+
    »);

    пока что для селекта — очень удобно когда нужно разные размеры и большие и маленькие и мредние
    $(»+

  6. 9
    Руслан

    Есть страница на ней подключен

    select

    возле «Архива новостей».
    Так вот когда мы делаем

    onchange

    должно брать ссылку с

    value

    и переходить по ней.

    В Firefox неправильно (не по той ссылке) переходит
    В WebKit браузерах вовсе ничего не происходит.

    Когда отключаю плагин все работает как задумано.

  7. 16

    Будет ли возможность менять цвет и шрифт для отдельных элементов selecta`a?

  8. 20

    При стилизации простого селекта в случае, если для ul изначально прописаны какие-то стили (например на HTML5 Boilerplate), в выпадающем списке получаем ненужные отступы.
    Было бы здорово в дефолтных стилях для плагина сделать обнуление отступов для ul, например так:

    .jq-selectbox ul {margin: 0; padding: 0;}
  9. 22
    Hello world

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

    Chrome версии 24.0.1312.52 m

  10. 24

    Добавил для тех, кто просил:

    — стили для <input type="text"> и <textarea>;
    — обнуление отступов для <ul> в псевдоселекте.

  11. 25
    Hoodognik

    А классы на текст инпуты скриптом не навешиваются? Просто в какой либо цмс будет довольно геморно это сделать.

  12. 27
    Gorynych

    Хотелось бы чтоб оно как-то автоматом умело работать с шириной. Если получится так сделать — было бы отлично.

  13. 28
    Gorynych

    Плагин ломается в сочетании с jQuery 1.9.0.

    Через ~10 секунд select выбрасывает событие onChange, но с одним и тем же значением, checkbox один раз устанавливается, после этого один раз снимается, и потом не меняется вообще.

  14. 32

    Выложил новую версию. С jQuery 1.9 теперь работает, как положено.

  15. 41
    Gorynych

    При использовании модального jQueryUI dialog на страничке с селектом, этот самый селект оказывается поверх всего. Дело в том, что у него z-index = 1000, а у div-а .ui-front, которым диалог закрывает всю страничку z-index = 100.

  16. 43
    Gorynych

    Давайте в jquery.formstyler.css после 270-ой строки подобавляем ко всем селекторам класс styled?.. А то как-то нехорошо получается.

  17. 44
    Gorynych

    Как повесить свой обработчик события onclick для checkbox-а?

      • 46
        Gorynych

        а не получиться сделать так, чтоб автоматом вызывалась функция, прописанная в свойстве onclick этого чекбокса?

      • 48
        Gorynych

        А ещё у этого span-а получается такой же id как и у input-а. Это, наверно, неправильно?

        • 49

          Пользователи просили, я сделал. Если с этим будут возникать какие-то проблемы, то уберу.

          • 50

            Но это ж невалидно получается…

            • 51

              Валидатор не видет результаты работы скрипта, но в принципе верно, двух одинаковых id не должно быть. Можно использовать атрибут data-id вместо id
              Дима не думал о том, чтобы сделать возможным передачу указанных атрибутов в
              к примеру таким образом можно сделать выпадающий список с картинками.
              у заводим атрибут data-img=»URL», который будет передаваться при обработке соответствующему элементу ну а выводить картинку из атрибуте — несложная задача.

              • 52

                Если я тебя правильно понял, все уже сделано. Добавь к тегу option какой-нибудь класс, и он появится у соответствующего пункта в псевдоселекте. С data-атрибутами не вижу смысла мудрить.

                По поводу id — можно сделать, чтобы он удалялся у оригинального элемента и передавался псевдоэлементу. В таком случае одинаковых id не будет. И дополнительные опции никакие не понадобятся. Надо было сразу так и сделать.

                • 53
                  Gorynych

                  Эй, эй )). Подождите. Не надо торопиться «сразу так делать».

                  Тут важный принципиальный момент. Ваш styler — он таки стайлер, или что? Если этот плагин предназначен для стилизации, то он должен минимально влиять на работу всего остального. Стилизация должна подключаться/отключаться, в идеале, вообще без изменений в коде. А если переставлять id на совсем другой элемент — это ж получится ой-ой-ой! Так нельзя.

                  • 54

                    Оригинальный элемент же не виден. Что плохого в том, что его id будет удален?

                    Я пока еще ничего не меняю. Нужно больше аргументов «за» и «против» такого изменения.

                    • 55

                      На оригинальных элементах могут висеть обработчики событий, и в этом случае они перестанут работать.

                    • 56
                      Gorynych

                      Во-первых, data-атрибуты. Хорошо, если люди придерживаются рекомендаций и используют префикс data-, тогда эти атрибуты можно перетащить в span. Но раньше это было не обязательно, и практически существует много кода, использующего возможность задавать свои атрибуты, названия которых могут быть какими угодно. Просто взять и подключить Styler уже не получится.

                      Во-вторых, опять же, уже написанный код, использующий «чистый» js: document.getElmentById(«agree»).chaked = false;

                      В-третьих, насколько я понимаю, обломаются все селекторы с псевдоклассом «:checked».

                    • 57

                      Возможно меня не правильно поняли.
                      Я имел ввиду реализовать возможность передачи атрибутов. А атрибут data взял за пример как самый правильный (с моей точки зрения), т.к. в через него можно передавать данные наиболее гибко.
                      Идея возникла не на пустом месте. Именно сейчас я столкнулся с проблемой, которой могло и не быть. Необходимо было реализовать переход по ссылке, находящейся в атрибуте data-url у option`a при клике (это хитрая задумка программиста, так что обсуждению не подлежало). Но это не главное, из php приходила не только ссылка, но и url картинки, количество элементов и прочие параметры, которые легко и непринужденно суются в data-* но не передаются в li, проблема конечно не существенная, решилась легко, но могла быть решена «из коробки».
                      С другой стороны скрипт предназначен для стилизации, а не для модификации, поэтому и спросил о возможности, потому что самому лень ковырять и дополнять styler )) всё же лучше автора никто не знает скрипт.

                    • 58

                      Можно сделать. Только нельзя передавать все атрибуты, которые могут быть у тега. Думаю, атрибутом data и можно ограничиться.

                    • 59

                      Атрибут data-* более чем достаточен. Было бы очень замечательно.
                      Опять же приучит новичков использовать правильные атрибуты) А то недавно столкнулся с хорошим скриптом, но там в rel передавался целый массив с данными, которые на js преобразовывались в необходимые элементы.
                      С data-* работать одно удовольствие.

            • 60
              Gorynych

              Ну да.
              А кроме того, у меня теперь скрипты начинают пестрить конструкциями, типа
              «span#agree», «input#agree».

              А галочек на форме дофига. И логика сложная. Но с другой стороны, id-шник — штука удобная.

              Предлагаю использовать настройки. В смысле, опции.

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

  18. 61
    Gemorroj

    Да, поддерживаю по id-шкам. На них вполне могут быть завязаны события. Уже столкнулись с этим. Пришлось выборке делать не по ID.

  19. 62

    Выводы, которые я сделал, исходя из ваших комментариев:

    1) Ни в коем случае нельзя удалять id у оригинальных элементов.
    2) Очень желательно иметь возможность добавляет свой id для псевдоэлементов. Это можно сделать, добавив, например, атрибут data-id.

    Все верно?

  20. 66
    shemyr

    Ваша работа вдохновила меня написать стеклянную кнопку (обёртку) .. сначала в виде сниппеты, затем плагином и главное виджетом (модулем класса) . Дело в том ,что написанные мною плагины (Visual-Basic) канули вместе с библиотеками, а вот модули класса (Visual-Basic) работают написанные ещё 96-97 годах и перекочевали от access 7 до облачного 365 . Вопрос конечно теоретический, но не задумывались ли вы написать хотя бы селект в виде виджета .. ? Тем более ему в последней версии jQuery разработчиками уделено немало внимания виджету.
    Нравится мне такая форма записи:

    <div class=' кнопка stecloBlock красная sub'>жми!<div>

    Какие хочешь свойства и методы ,те и добайляй …

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