Главная 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. Сделайте пожалуйста формирование тега «li» в следующих версиях вот таким:

    var rr = option. eq (i).attr ('class');
    ddlist += ''+ option. eq (i).text () +'';

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

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

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

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

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

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

    var selectbox =
    $(''+
    ''+
    ''+
    ''+
    '');

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

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

    select

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

    onchange

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

    value

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

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

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

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

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

    .jq-selectbox ul {margin: 0; padding: 0;}
  9. Классный плагин, да вот только на демо странице в разделе мультиcелекторы стилизация селекторов не происходит

    Chrome версии 24.0.1312.52 m

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

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

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

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

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

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

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

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

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

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

    • $('span.jq-checkbox').click(function() { ... });
      • а не получиться сделать так, чтоб автоматом вызывалась функция, прописанная в свойстве onclick этого чекбокса?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Все верно?

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

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

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

    • не задумывались ли вы написать хотя бы селект в виде виджета. ?

      Не понимаю, о чем вы.

      • На jQuery есть фабрика виджетов. Она обладает наследственностью, инстализацией, клосами, приватные и публичные методами, короче полной атрибутикой присущей модулю класса. Цепляется она в любом месте, хоть посередине, решены проблемы циклических ссылок и утечки памяти. Подклассы (Коллбэки) имеют область видимости такие как классов CSS, русский понимают. Проверяю на одновременное подключение разных версий библиотек …

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