Дизайн UI: оформляем чекбокс и радио-ввод при помощи iCheck

Сегодня же мы хотим рассказать вам об ином способе достижения подобного эффекта при помощи jQuery-плагина под названием iCheck.

Применение

Чтобы запустить iCheck, нам понадобится jQuery 1.6 или более свежая версия. Как только вы включите эти библиотеки в ваш HTML-документ, добавьте следующую строку для инициализации функционала плагина.

$('input').iCheck();

iCheck будет обнаруживать все “радио” и “чекбоксы”, и оборачивать их в div-элемент. Другие элементы ввода, вроде ‘text’ или ‘textarea’ будут просто игнорироваться.

<div class="iradio">
	<input type="radio" id="radio">
</div>
<div class="icheckbox">
	<input type="checkbox" id="checkbox">
</div>

Более того, iCheck также применит класс для div-оболочки при определенных условиях, например, при ‘hover’, ‘checked’ или ‘focus’:

<div class="iradio checked hover">
	<input type="radio" id="radio">
</div>
<div class="icheckbox checked">
	<input type="checkbox" id="checkbox">
</div>

На данный момент, вы можете оформить ввод при помощи этих классов в ваших каскадных таблицах стилей.

Шаблоны оформления

Что же, не все так сладко с использованием CSS. К счастью, автор iCheck предлагает несколько красивых шаблонов с набором цветов, из которых вы можете выбирать. На следующем скриншоте вы можете видеть наш любимый – шаблон Square.

Шаблоны представлены вместе с архивом файлов. Чтобы воспользоваться шаблоном, нужно просто указать определенную таблицу стилей в вашем документе. Если взять Square как пример, то нам нужно добавить следующий код:

<link rel="stylesheet" href="css/square/orange.css">

Замените название таблицы стилей на одно из представленных: blue.css, pink.css и red.css для того, чтобы изменить цвет. Лучше всего то, что все эти шаблоны работают на экранах retina, что гарантирует прекрасное качество отображения на всех устройствах.

Дальнейшая кастомизация

Для более продвинутых пользователей здесь предусмотрены опции для изменения разметки, которая генерируется в iCheck. Предположим, что вам нужно изменить ввод ‘radio’. Вы можете указать его при помощи опции ‘handle’ следующим образом:

$('input').iCheck({
	handle: 'radio'
});

«icheckbox» и «radio» – это стандартный класс, заданный в div-оболочке. Но у нас также есть возможность изменить этот класс на что-либо еще при помощи checkboxClass и radioClass. Давайте взглянем на пример:

$('input').iCheck({
	checkboxClass: 'mycheckbox',
	radioClass: 'myradio'
});

Если вам и этого недостаточно, вы можете провести и более глубокую модернизацию классов для состояния элементов ввода (например, ‘hover’, ‘checked’, ‘focus’ и так далее) используя:

* checkedClass
* disabledClass
* hoverClass
* focusClass

Для нас стандартное значение этих опций вполне подходит, и нам не потребовались какие-то более глубокие изменения.

В завершение

Как уже ранее было отмечено в данной статье, CSS-техника может подойти не всем, особенно, если среди вашей целевой аудитории есть пользователи с браузерами IE или устаревшими версиями других браузеров. Так что, вам может подойти вариант с использованием данного jQuery-плагина. В целом, iCheck – это отличный jQuery-плагин с несколькими готовыми к использованию шаблонами оформлениями и опциями.

Что же может быть лучше такого плагина? Пройдите на официальный сайт, чтобы увидеть iCheck в действии.