Главная JavaScript

jQuery-плагин для стилизации радиокнопок

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

* * *

Радиокнопки

Завершаю серию статей по стилизации элементов html-форм с помощью jQuery и CSS. В этот раз это плагин для радиокнопок (еще их называют переключателями), которые выводятся тегом <input type="radio" />.

Демонстрация работы плагина

Примеры на отдельной странице.

Достоинства

  • При отключенном JavaScript отображается стандартная радиокнопка, т. е. ее работоспособность не теряется.
  • Работает и для динамически добавляемых/изменяемых радиокнопок.
  • Маленький размер скрипта (чуть больше 1 килобайта).
  • Легко поддается оформлению через CSS.
  • Умеет «ловить» нажатие клавиши Tab.
  • Поддерживает атрибут «disabled».
  • Кроссбраузерность.

Недостатки

  • Не обнаружено.

Скачать

Плагин недоступен, т.к. он уже не актуален.

jQuery-плагин «Radio Buttons Styler»

Версия: 1.0.1 | Загрузок: 1397 | Размер: 6 Кб | Последнее обновление: 22.09.2012

Обновления

22.09.2012
Поменял метод prop () на attr (), чтобы добавлялся атрибут checked.

Подключение плагина

  1. Если jQuery на сайте еще не подключен, то перед тегом </head> добавьте такую строку:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    
  2. Сразу после jQuery подключите плагин:

    <script src="ПУТЬ_К_ФАЙЛУ/jquery.radio.min.js"></script>
    
  3. Далее задействуйте плагин:

    <script>
    (function($) {
     $(function() {
    
       $('input.styled').radio();
    
    })
    })(jQuery)
    </script>
    

    Этот код поместите перед тегом </head> после вышеуказанных файлов.

    Соответственно, нужно добавить класс .styled (при желании можно поменять) тем радиокнопкам, которые необходимо стилизовать:

    <input type="radio" class="styled" />
    
  4. При динамическом изменении у радиокнопок атрибутов checked и disabled необходимо запустить триггер refresh, например:

    (function($) {
     $(function() {
    
       $('button').click(function() {
         $('input.styled:first').prop('checked', true).trigger('refresh');
       })
    
    })
    })(jQuery)
    

HTML-код после выполнения плагина

Он будет выглядеть следующим образом:

<input type="radio" class="styled" style="position: absolute; left: -9999px"/>
<span class="radio" style="display: inline-block"></span>

CSS-классы, используемые для оформления радиокнопки

.radioрадиокнопка по умолчанию
.radio.checkedвыбранная радиокнопка
.radio.disabledнеактивная (недоступная для выбора) радиокнопка
.radio.focusedфокус на радиокнопке, когда нажата клавиша Tab

Комментарии (38)

  1. Спасибо за плагин. А не думал объединить свои плагины для стилизации элементов формы в один? Было бы удобно.

  2. Для полного счастья вам надо объединить все три плагина, ну и добавить разве что выбор файла B)

  3. С клавиатуры вообще никак нельзя пользоваться вашими радиокнопками. На hover чтонить надо сделать с кнопками. Disabled не видно, что отключена.

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

  5. Теперь понятно. А как быть с не работающим добавлением классов? При клике на импут, на лейбл, после нажатия пробела — ничего не происходит, checked не ставится. Зато фокус работает. Устанавливал полностью так-же, как и чекбоксы.

  6. И такая особенность, вот накликал в форме радиокнопок — класс не добавился. Специально выставил обязательное поле. Жму отправить форму. Меня кидает на ту — же страницу с оповещением, что нужно заполнить обязательные поля, но теперь выбранные ранее радиокнопки работают- класс checked есть. То-есть класс добавляется после попытки отправить форму.

  7. Да, ваш пример работает.

    • Раз в моем примере работает, а у вас не работает, значит что-то неправильно делаете.

      По поводу checked — да, он почему-то не добавляется, но я проверял на php — данные при этом отправляются, как положено. Т. е. если отправить форму без проверки обязательных полей, то информация из выбранной радиокнопки передается.

      Самому интересно, почему так происходит.

  8. Ну класс теперь, и опросник будет красивым)) А то эти тусклые радиобатоны достали))

  9. жаль не работает на ранних версиях jquery
    в отличие от этого ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
    jquery 1.2.6 пашет

  10. Димокс, понимаешь, на некоторых движках проблематично обновить jquery, на том же друпале надо колдовать с бубном

  11. ПафНутиЙ, если скопипастить, то большая часть jquery плюшек в админке работать не будет, ладно в общем… есть варианты выхода из-под этого…

  12. Дима, сварганил три-в-одном, особо сильно не запаривался по поводу оформления, взял за основу h5bp, всё, что относится к плагинам — вынес в отдельные файлы.
    Но думается мне, что проект надо делать на гитхабе и пост закидывать куда-нибудь типа хабра, тогда совместными усилиями можно сделать очередной лучший скрипт от Димокса)

  13. Подключил как описано. Не срабатывает.

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