Главная › JavaScript

jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей

2614 комментариев

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-плагин для стилизации input[type="radio"]

38 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью jQuery и CSS. В этот раз это плагин ...

jQuery-плагин для стилизации input[type="checkbox"]

35 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Как и обещал ранее, делюсь своим очередным jQuery-скриптом в виде плагина. Он предназначен для свободного оформления ...

jQuery-плагин для стилизации select’ов

105 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, ...

Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров

105 комментариев

Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью ...

Комментарии (2 614)

  1. Егор
    8 лет 6 месяцев назад

    Классная вещь. Спасибо

  2. zox
    8 лет 6 месяцев назад

    Добрый день, почему-от radio не переключается, выделяются все хотя name один и тот же: jsfiddle.net/maLmtmjm/1/

  3. Фарит
    8 лет 6 месяцев назад

    Уважаемый Dimox. Пофиксите, пожалуйста баг c Mac OS, а то из-за этого бага, мои коллеги отказываются его использовать ((

  4. Сан Саныч
    8 лет 6 месяцев назад

    Привет,

    Имеем селектор на drupal с множественным выбором опций. Скрипт его оформил в радио-кнопочки, всё красиво. Выбрать несколько опций можно, удреживая клавишу ctrl. Необходимо, чтобы был мультивыбор нескольких радио-кнопок и через клик (как если бы это были чекбоксы).

    Dimox, подскажите, пожалуйста, пример или куда смотреть. Спасибо.

  5. Санек
    8 лет 6 месяцев назад

    Не подскажите, как быть. я использую связанные опции на опенкарт и при выборе одного селекта, подгружаются/меняются данные в другом селекте, так вот в том другом селекте происходит касяк-он становится обычного вида

    • Dimox
      8 лет 6 месяцев назад / ответ на коммент Санек

      В конце функции, которая добавляет/изменяет второй селект, запустите для этого селекта .styer ().

      • Санек
        8 лет 6 месяцев назад / ответ на коммент Dimox

        Не подскажешь куда и что нужно добавить, что-то совсем не получается, куда только не пихал стайлер

        скрипт chained:

        (function(a){a.fn.chained=function(b,c){return this.each(function(){var c=this;var d=a(c).clone();a(b).each(function(){a(this).bind("change",function(){a(c).html(d.html());var e="";a(b).each(function(){e+="\"+a(":selected",this).val()});e=e.substr(1);var f=a(b).first();var g=a(":selected",f).val();a("option",c).each(function(){if(!a(this).hasClass(e)&amp;&amp;!a(this).hasClass(g)&amp;&amp;a(this).val()!==""){a(this).remove()}});if(1==a("option",c).size()&amp;&amp;a(c).val()===""){a(c).attr("disabled","disabled")}else{a(c).removeAttr("disabled")}a(c).trigger("change");if(typeof obUpdate=="function"){a(':input[name^="option"]',c).change(function(){obUpdate(a(this),useSwatch)})}if(typeof updatePx=="function"){a(':input[name^="option"]',c).change(function(){updatePx()})}});if(!a("option:selected",this).length){a("option",this).first().attr("selected","selected")}a(this).trigger("change")})})};a.fn.chainedTo=a.fn.chained})(jQuery)

        код где он применяется в шаблоне:

        <?php if ($chained_options) { ?>
<script type="text/javascript"><!--
<?php foreach ($chained_options as $chained_option) { ?>
$('#option-<?php echo $chained_option['child']; ?>').chained('#option-<?php echo $chained_option['parent']; ?>');
<?php } ?>
//--></script>
<?php } ?>
  6. Matvey
    8 лет 6 месяцев назад

    День добрый!
    Такая проблема, в IE8 и ниже поле select’а не отображается ни выбранный пункт, ни стрелка, ни картинка вместо стрелки.
    В чем проблема может быть?

  7. Сан Саныч
    8 лет 6 месяцев назад

    Предыдущий комментарий не актуален. Разобрался.

    Всё просто.
    Всего-навсего нужно было использовать правило зажатого ctrl на клик по опции (li).

    li.filter(':not(.disabled):not(.optgroup)').click(function(e) { el.focus();
var clkd = $(this);
if (clkd.is('.selected')) clkd.removeClass('selected first');
else clkd.addClass('selected first'); clkd.siblings().removeClass('first');

    Спасибо за плагин и за отзывчивость.

  8. neoxaker
    8 лет 6 месяцев назад

    Более правильным вариантом решения проблемы с подключаемыми шрифтами была бы переинициализация плагина после окончания загрузки шрифта. Отловить загрузку шрифта можно при помощи гугловского скрипта «webfontloader» github.com/typekit/webfontloader. При подключенном плагине код переинициализации выглядел бы так:

    (function(){
  if (typeof WebFont != 'undefined') {
       WebFontConfig = {
            custom: {
                families: ['Arimo']
            },
            active: function() {
                $('select, :checkbox, :radio').trigger('refresh');
            }
        };
        WebFont.load(WebFontConfig);
   }
})();

    В данном случае подключалось семейство шрифтов Arimo.

  9. Кара
    8 лет 6 месяцев назад

    Возможно ли в селекте элементам выставлять цвет?

  10. Russ_lan
    8 лет 6 месяцев назад

    В документации:
    текст по умолчанию в одиночном селекте; отображается, когда у первой опции отсутствует значение:

    <option></option>

    это когда нужно установить свой плейсхолдер у select

    На это ругается валидатор w3c

    Element option without attribute label must not be empty.

  11. Никита
    8 лет 6 месяцев назад

    Здравствуйте, столкнулся с проблемой необходимости закрытия select’а при ресайзе/скролле окна, как это можно сделать при использовании вашего плагина? Кстати стандартный селект во всех этих случаях закрывается автоматически, возможно стоит это реализовать в самом плагине.

  12. Никита
    8 лет 6 месяцев назад

    Еще при использовании плагина часто возникает проблема когда выпадающий список у select обрезается какими то внешними контейнерами с overflow: hidden. Если убрать overflow: hidden нет возможности, то это становится проблемой. Решал подобную задачу изменением позиционированния всего кастомизированного селекта на fixed и расчетом координат где был селект. Может быть вы знаете еще какое нибудь решение подобной проблемы? Стандартный селект в подобных случаях не обрезается.

  13. Никита
    8 лет 6 месяцев назад

    Есть какой то метод который позволяет открыть стилизованный select из js? Как я понимаю обычный селект из js нельзя открыть просто так.

  14. Петр
    8 лет 6 месяцев назад

    Как сделать селект изначально неактивным, и как его потом активировать (например после нажатия на кнопку какуюто). Добавление класса «disabled» на старте ничего не дает (

  15. Anna
    8 лет 6 месяцев назад

    А что нет параметра, чтобы при заданной ширине селекта длинные option переносились на новую строку? Плохо, что значения обрезаются

  16. Нурбек
    8 лет 6 месяцев назад

    Столкнулся с такой проблемой, когда в select только один option, не выбирается этот option внутри стилизованного select. Так и остается надпись «Выберите». Кто знает в чем проблема?

  17. Алексей
    8 лет 6 месяцев назад

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

  18. Никита
    8 лет 6 месяцев назад

    Здравствуйте! Плагин классный, пользуюсь постоянно, но встала задача сделать селект не с текстом, а с картинками, можно как-нибудь такое провернуть? Спасибо!

  19. KOs
    8 лет 5 месяцев назад

    После установки плагина страница стала загружаться 26 секунд (без плагина 0,86 секунд)…

  20. Константин
    8 лет 5 месяцев назад

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

    …
    0.8
    0.9
    1.0
    1.1
    1.2
    1.3
    1.4
    1.5
    и так далее…

    Проблема в скорости загрузки эффектов плагина. Страницы — любые грузятся в среднем 40−55 секунд. Есть ли решение данной проблемы?

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