Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
Стильные чекбоксы с помощью CSS и jQuery
 |
 |
Исходники |
Пример |
В этом уроке мы создадим альтернативное оформление для чекбоксов, отличающееся от того, что нам предлагают браузеры по умолчанию. Реализовывать мы это будем с помощью создания несложного плагина jQuery. Он заметно улучшит внешний вид формы, а при выключенном JavaScript все оставит как есть.
HTML
index.html
Сперва нам понадобится HTML-каркас для страницы с формой и чекбоксами, внешний вид которых мы и будем модифицировать средствами jQuery и CSS.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Better Check Boxes with jQuery and CSS | Tutorialzine Demo</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.tzCheckbox/jquery.tzCheckbox.css" />
</head>
<body>
<div id="page">
<form method="get" action="./">
<ul>
<li>
<label for="ch_effects">Отображение эффектов: </label>
<input type="checkbox" id="ch_effects" name="ch_effects" data-on="Показывать" data-off="Не показывать" />
</li>
<li>
<label for="ch_location">Включить отслеживание местоположения: </label>
<input type="checkbox" id="ch_location" name="ch_location" checked />
</li>
<li>
<label for="ch_showsearch">Включить меня в результаты поиска: </label>
<input type="checkbox" id="ch_showsearch" name="ch_showsearch" />
</li>
<li>
<label for="ch_emails">Оповещения по E-mail: </label>
<input type="checkbox" id="ch_emails" name="ch_emails" data-on="Обязательно!" data-off="Нет, спасибо" />
</li>
</ul>
</form>
</div>
<script src="js/jquery.js"></script>
<script src="jquery.tzCheckbox/jquery.tzCheckbox.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Главный содержащий элемент - блок div с #page содержит форму. Внутри формы - ненумерованный список и элементами label, в которых описывается каждый из чекбоксов. Хороший стандарт для повышения юзабилити заключается в том, что клик по текстовой подписи к чекбоксу также выбирает или деактивирует его (это достигается благодаря использованию атрибута for).
Заметьте, что в коде присутствуют атрибуты data из HTML5. Данные атрибуты используются для того, чтобы "присоединить" к тэгу некую дополнительную информацию. В нашем случае атрибуты data-on и data-off определяют тот текст, который отображается при выборе или деактивации чекбокса.
А вот разметка чекбоксов для замены:
<span class="tzCheckBox checked"> <span class="tzCBContent">ON</span> <span class="tzCBPart"></span> </span>
Когда происходит вызов нашего плагина, он проходится циклом по всем чекбоксам и вставляет код, приведенный выше, после каждого из них, одновременно с этим скрывая оригинальное отображение, которое идет по умолчанию. Также с помощью селектора класса задается стилевое оформление чекбокса (состояние выбора и неактивное состояние).
Как вы видите на иллюстрации, в качестве фона для чекбоксов используется удлиненная фоновая картинка в формате png для того, чтобы размер измененных чекбоксов изменялся в зависимости от текста, который используется для подписи.
Теперь давайте перейдем к стилевому оформлению.
CSS
Верхяя чать png-картинки используется для состояния, когда чекбокс отмечен, а нижняя - для неактивного чекбокса. Как уже было упомянуто выше, ширина меняется в зависимости от того, насколько длинный текст находится в тэге label.
jquery.tzCheckbox.css
.tzCheckBox{
background:url('background.png') no-repeat right bottom;
display:inline-block;
min-width:60px;
height:33px;
white-space:nowrap;
position:relative;
cursor:pointer;
margin-left:14px;
}
.tzCheckBox.checked{
background-position:top left;
margin:0 14px 0 0;
}
.tzCheckBox .tzCBContent{
color: white;
line-height: 31px;
padding-right: 38px;
text-align: right;
}
.tzCheckBox.checked .tzCBContent{
text-align:left;
padding:0 0 0 38px;
}
.tzCBPart{
background:url('background.png') no-repeat left bottom;
width:14px;
position:absolute;
top:0;
left:-14px;
height:33px;
overflow: hidden;
}
.tzCheckBox.checked .tzCBPart{
background-position:top right;
left:auto;
right:-14px;
}
Элемент span с классом .tzCheckBox спозиционирован как inline-block, что позволяет ему оставаться на том же уровне, что и окружающий текст, давая нам при этом возможность задать ему стили для внешних и внутренних отступов как блочному элементу.
Также для него установлено относительное позиционирование, что позволяет нам использовать так называемый эффект "раздвижных дверей" и показывать элемент span с классом .tzCBPart с оставшейся частью фона.
В зависимости от того, выбран чекбокс или нет, элемент span с классом .tzCPContent выравнивается по левому или по правому краю с соответствующими отступами, что приводит к расширению элемента span с классом .tzCheckBox.
И теперь пришло время создать сам jQuery плагин.
jQuery
Мы назовем его tzCHeckbox. В качестве параметров будет использоваться значение поля label. По сути это массив, в котором содержатся значения полей label для состояний вкл / выкл.
jquery.tzCheckbox.js
(function($){
$.fn.tzCheckbox = function(options){
// Default On / Off labels:
options = $.extend({
labels : ['ON','OFF']
},options);
return this.each(function(){
var originalCheckBox = $(this),
labels = [];
// Проверяем наличие атрибутов data-on / data-off:
if(originalCheckBox.data('on')){
labels[0] = originalCheckBox.data('on');
labels[1] = originalCheckBox.data('off');
}
else labels = options.labels;
// Создаем разметку для "нового чекбокса":
var checkBox = $('<span>',{
className : 'tzCheckBox '+(this.checked?'checked':''),
html: '<span class="tzCBContent">'+labels[this.checked?0:1]+
'</span><span class="tzCBPart"></span>'
});
// Вставляем "новый чекбокс" и прячем исходный:
checkBox.insertAfter(originalCheckBox.hide());
checkBox.click(function(){
checkBox.toggleClass('checked');
var isChecked = checkBox.hasClass('checked');
// Синхронизация оригинального чекбокса:
originalCheckBox.attr('checked',isChecked);
checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
});
// Отслеживаем изменения для оригинального чекбокса и "переносим" их на новый чекбокс:
originalCheckBox.bind('change',function(){
checkBox.click();
});
});
};
})(jQuery);
Все изменения с нашим "замененным чекбоксом" возвращаются обратно оригинальному чекбоксу (который спрятан, но все же находится на странице).
Сохранение оригинальных чекбоксов на странице важно, т.к. это позволяет при отправке формы в любом случае (с или без AJAX) передать значения, которые выбрал пользователь.
Использование плагина вполне очевидное. В файле script.js пишем:
$('input[type=checkbox]').tzCheckbox({
labels: [ 'Включено', 'Выключено' ]
});
Данный код выбирает все чекбоксы на странице и передает их функции tzCheckbox со словами "Включено" и "Выключено" как замещающий текст.
Все, наш плагин jQuery для модификации чекбоксов готов!
Заключение
Вы можете использовать данное решение для улучшения внешнего вида чекбоксов в Ваших формах. Но если по каким-то причинам JavaScript отключен, то пользователь увидит чекбоксы в том виде, как браузер отображает их по умолчанию.
По материалам tutorialzine.com
Перевод - Дмитрий Науменко
P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по адаптивной верстке. Все это позволит вам быстрее овладеть важными навыками в создании сайтов:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
