—»     —»   Дизайн UI: оформляем чекбокс и радио-ввод при помощи iCheck
  Раздел: Формы   Нет комментариев  

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



В нашей предыдущей статье мы показали вам, каким образом можно оформить чекбокс и радио-ввод при помощи CSS. Правда, у такого подхода есть серьезный минус – недостаточная браузерная поддержка. Эффекты не работают в IE8 и ранних версиях браузера, так как в этих браузерах не поддерживается псевдо-класс :checked. Так что, это решение вряд ли подойдет в каждом случае.

Дизайн 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.

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

Шаблоны представлены вместе с архивом файлов. Чтобы воспользоваться шаблоном, нужно просто указать определенную таблицу стилей в вашем документе. Если взять 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 в действии.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: отправные формы, jQuery
Опубликовал Design FactoRy   Прочитано (раз): 6326   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Мужские костюмы на свадьбу цены
Адрес салона. Каталог компаний и услуг.
mkostum.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Февраль 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728