Главная›JavaScript

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

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

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

* * *

Радиокнопки

Завершаю серию статей по стилизации элементов 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

Смотрите также

jQuery Form Styler - плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)

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

Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; ...

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

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

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

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

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

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

Цифровые часы на чистом CSS и jQuery

41 комментарий

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

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

  1. Иван
    29 августа 2012 г. в 18:07

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

    1. Dimox
      29 августа 2012 г. в 18:20 / ответ на коммент Иван

      Пожалуйста. Думал. Если получится их объединить красиво, то сделаю. Пока я еще недостаточно опытен для этого.

      1. Иван
        29 августа 2012 г. в 18:44 / ответ на коммент Dimox

        Я раньше использовал вот этот плагин http://uniformjs.com/. Глянь исходный код и сделай по аналогии.

        1. Dimox
          29 августа 2012 г. в 20:31 / ответ на коммент Иван

          Попробую.

  2. Sadykh
    29 августа 2012 г. в 19:48

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

    1. Dimox
      29 августа 2012 г. в 20:36 / ответ на коммент Sadykh

      Выбор файла нет смысла делать на jQuery, т.к. есть очень простые решения с минимумом JavaScript-кода.

  3. mihdan
    29 августа 2012 г. в 20:27

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

    1. Dimox
      29 августа 2012 г. в 20:35 / ответ на коммент mihdan

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

      В смысле? Я без проблем переключаю.

      На hover чтонить надо сделать с кнопками. Disabled не видно, что отключена.

      Ничто не мешает поменять картинки на свои и добавить hover-эффект.

      1. mihdan
        29 августа 2012 г. в 23:15 / ответ на коммент Dimox

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

        1. Dimox
          30 августа 2012 г. в 00:24 / ответ на коммент mihdan

          Значит что-то у тебя не то с цветокоррекцией на ноуте.

  4. Алексей
    4 сентября 2012 г. в 20:42

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

    1. Dimox
      4 сентября 2012 г. в 20:56 / ответ на коммент Алексей

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

  5. Алексей
    4 сентября 2012 г. в 21:47

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

    1. Dimox
      4 сентября 2012 г. в 21:54 / ответ на коммент Алексей

      А в моем примере работает?

  6. Алексей
    4 сентября 2012 г. в 21:54

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

  7. Алексей
    4 сентября 2012 г. в 22:33

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

    1. Dimox
      4 сентября 2012 г. в 22:57 / ответ на коммент Алексей

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

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

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

  8. Ринат
    7 сентября 2012 г. в 22:39

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

  9. Арти
    12 сентября 2012 г. в 23:49

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

    1. Dimox
      13 сентября 2012 г. в 10:28 / ответ на коммент Арти

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

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

  10. Арти
    13 сентября 2012 г. в 10:53

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

    1. ПафНутиЙ
      14 сентября 2012 г. в 10:08 / ответ на коммент Арти

      Дима, в очередной раз респект тебе! Мне как раз стало нужно)))
      Как я вообще упустил этот пост из виду — не пойму.

      Арти — а просто скопипастить код 1.7.2 (1.8 может и не заработать) из файла в файл что мешает?

      1. Dimox
        14 сентября 2012 г. в 10:14 / ответ на коммент ПафНутиЙ

        Отлично, пожалуйста!

  11. Арти
    14 сентября 2012 г. в 10:55

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

    1. ПафНутиЙ
      14 сентября 2012 г. в 12:31 / ответ на коммент Арти

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

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

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

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

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

      1. Dimox
        14 сентября 2012 г. в 12:44 / ответ на коммент ПафНутиЙ

        С буллетом смотрится некрасиво. В FF, IE и Safari он вертикально не по центру. Я бы не стал так делать.

        1. ПафНутиЙ
          14 сентября 2012 г. в 13:10 / ответ на коммент Dimox

          Это на любителя) и как пример лёгкой кастомизации твоих работ )

  12. ПафНутиЙ
    14 сентября 2012 г. в 19:57

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

    1. Dimox
      14 сентября 2012 г. в 20:01 / ответ на коммент ПафНутиЙ

      До уровня хабра мне еще далеко, точно знаю.

      1. ПафНутиЙ
        14 сентября 2012 г. в 20:28 / ответ на коммент Dimox

        Ну гитхаб никто не запрещает же.

        1. Dimox
          14 сентября 2012 г. в 20:31 / ответ на коммент ПафНутиЙ

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

          1. ПафНутиЙ
            14 сентября 2012 г. в 20:43 / ответ на коммент Dimox

            Там просто очень удобно.
            Например человек нашёл способ улучшить скрипт. Поменять нужно одну строку в каком то файле. Он форкает репозитрий, меняет, а ты объедмняешь его репозиторий со своим если того хочешь. Это лишь самый очевидный плюс.
            Я на гит все свои последние наработки сую, это действительно удобно.
            Ну и клиент для винды там сделали наконец хороший.

            1. Dimox
              14 сентября 2012 г. в 20:48 / ответ на коммент ПафНутиЙ

              Ясно. Надо будет как-нибудь попробовать.

  13. PACH
    27 сентября 2012 г. в 14:37

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

    1. Dimox
      27 сентября 2012 г. в 14:56 / ответ на коммент PACH

      Значит что-то неправильно сделали.

      1. PACH
        27 сентября 2012 г. в 15:27 / ответ на коммент Dimox

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

        1. Dimox
          27 сентября 2012 г. в 15:33 / ответ на коммент PACH

          Посмотрите примеры и сделайте по аналогии.

  14. Dimox
    13 октября 2012 г. в 10:22

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

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

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код

© 2006–2025 Dimox.name. Все права защищены. Перепечатка запрещена.