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

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

* * *

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. 1

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

  2. 5

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

  3. 7

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

  4. 11
    Алексей

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

  5. 13
    Алексей

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

  6. 15
    Алексей

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

  7. 16
    Алексей

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

    • 17

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

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

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

  8. 18

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

  9. 19
    Арти
    @

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

    • 20

      Во-первых, скрипт по указанной ссылке сделан на чистом JavaScript, т.е. работает без jQuery.

      Во-вторых, зачем пользоваться старыми версиями jQuery? Не понимаю.

  10. 21
    Арти
    @

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

  11. 24
    Арти
    @

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

    • 25

      Арти
      в новых релизах jquery много всего устаревшего отключили, а двиг наверное использует эти функции.
      Dimox
      Доточил немного скрипт, теперь картинки не нужны а значит можно вертеть как угодно ))))
      Добавил переменную

      var options = $.extend({
      		content : "&bull;" // контент для оформления без картинок, по умолчанию • (буллет)
      	}, prop);

      а так же подправил .live

      input.on('refresh', function() { //live скоро уберут из дистрибутива, поэтому .on

      Сейчас попробую объединить все три.

  12. 28

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

  13. 34
    PACH

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

  14. 38

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