Ion.CheckRadio 2.0.0
jQuery плагин для стилизации чекбоксов и радио-батонов :)
С поддержкой скинов

Обратная связь и поддержка

В случае обнаружения багов или недочетов в плагинах, воспользуйтесь разделом Issues в репозитории на GitHub

Поддержать

Поддержите разработку ion.RangeSlider «Патреон»
Bitcoin 13vdgT6EoAVupdGuLhE4ABW245NTixAj1G

Реклама

Описание

  • Ion.CheckRadio — простой и понятный плагин для стилизации чекбоксов и радио-батонов.
  • С поддержкой скинов
  • Кроссбраузерная поддержка: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
  • Плагин поддерживает устройства с touch-экраном (iPhone, iPad, etc.).
  • Репозиторий на GitHub.
  • Плагин свободно распространяется на условиях лицензии MIT.
 

Демки

Зависимости

Установка с помощью bower

  • bower install ion-checkradio

Установка с помощью npm

  • npm install ion-checkradio

Подключение

Подключаем библиотеки:

  • jQuery
  • ion.checkRadio.min.js

CSS:

  • normalize.min.css - желательно, если он у вас еще не подключен
  • ion.checkRadio.css
  • ion.checkRadio.skinName.css

Не забываем про картинки скина:

  • icr-skinName-skin.png - спрайт
  • Либо воспользуйтесь вложенным в архив PSD файлом, и нарисуйте собственный скин

Создаем чекбоксы и/или радио-батоны:

<input type="radio" name="reading" value="0" id="reading_0" /> <label for="reading_0">Очень люблю</label>
<input type="radio" name="reading" value="1" id="reading_1" /> <label for="reading_1">Иногда читаю</label>
<input type="radio" name="reading" value="2" id="reading_2" /> <label for="reading_2">Лучше фильм посмотрю</label>
<input type="radio" name="reading" value="3" id="reading_3" /> <label for="reading_3">Ненавижу</label>
    
или так:
    
<label><input type="radio" name="movies" value="0" /> Обожаю</label>
<label><input type="radio" name="movies" value="1" /> Не против</label>
<label><input type="radio" name="movies" value="2" /> Так себе</label>
<label><input type="radio" name="movies" value="3" /> Ненавижу</label>
    
или вот еще чекбоксиков:

<label><input type="checkbox" name="think" value="0" /> О работе</label>
<label><input type="checkbox" name="think" value="1" checked /> Об отдыхе</label>
<label><input type="checkbox" name="think" value="2" disabled checked /> О сексе</label>

или используем правильную структуру (рекомендуется):

<label class="icr-label">
    <span class="icr-item type_radio"></span>
    <span class="icr-hidden"><input class="icr-input" type="radio" name="job" value="0" /></span>
    <span class="icr-text">Super good</span>
</label>

<label class="icr-label">
    <span class="icr-item type_radio"></span>
    <span class="icr-hidden"><input class="icr-input" type="radio" name="job" value="1" disabled checked /></span>
    <span class="icr-text">Like it</span>
</label>

Инициализируем плагин:

// все на странице:
$("input[type='radio'], input[type='checkbox']").ionCheckRadio();

// конкретную группу:
$(".my_inputs").ionCheckRadio();

Profit!

Поддержать

Скачать

Поддержать

Поделиться

comments powered by Disqus
Fork me on GitHub