27 января 2016      293      0

Оформление checkbox и radiobutton

В уроке мы займёмся созданием таких красивых чекбоксов:
Обычно при вёрстке форм для элементов checkbox и radiobutton создаются ещё и ярлыки label. Ярлыки упрощают выделение нужных чекбоксов и радиокнопок. Взгляните сами.

Исходный код:

<input id="CheckBox1" type="checkbox">
Я без ярлыка.
 
<input id="CheckBox2" type="checkbox"> 
<label id="Label2" for="CheckBox2">А я с ярлыком. <Кликни по мне!</label>

Результат:
Я без ярлыка.

Как видите, клик по ярлыку выделяет соответствующий чекбокс.

Возьмём две картинки: UnCheck.png Check.png

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

.CheckBoxLabelClass{
		padding-left: 30px; /*создание отступа слева*/
		padding-top: 3px;
		background:url("/examples/img/UnCheck.png") no-repeat; /*установка картинки на фоне*/
		margin: 5px;
		height: 28px;
		display: inline-block;
	}
	
	.CheckBoxLabelClass:hover{
		text-decoration: underline; /*Подчёркиваем при наведении*/
	}

Испытуемый:

1
2
<input id="CheckBox3" type="checkbox" class="CheckBoxClass">
<label id="Label3" for="CheckBox3" class="CheckBoxLabelClass">Кликни по мне!</label>

Результат применения стилей:

Как видим, нужная нам картинка добавилась. Но она не меняется. Это мы сейчас и поправим. Добавим новый класс стилей, который будет описывать отмеченный флажок.

	.LabelSelected{
		background: url("/examples/img/Check.png") no-repeat;
	}

И подключим небольшой код на JQuery

1
2
3
4
5
6
7
8
9
$(document).ready(function(){ 
    $(".CheckBoxClass").change(function(){   //Вызов функции при событии change (смена состояния)
        if($(this).is(":checked")){  //если чекбокс отмечен, то
            $(this).next("label").addClass("LabelSelected"); //добавляем класс LabelSelected ярлыку
        }else{  
            $(this).next("label").removeClass("LabelSelected");  //иначе удаляем его
        
    }); 
}); 

Что у нас получилось после всего этого:

Замечательно! Ярлык ведёт себя также, как и checkbox. Осталось только спрятать оригинальный чекбокс от глаз пользователя. Добавляем стили:

	.CheckBoxClass{  
		display:none;  
	}

И наш чекбокс начинает вести себя так:

Результат совпадает с тем, чего мы добивались. У чекбокса с довольно малым количеством css полностью поменялось отображение. Кроме чекбоксов этот метод может изменять отображение и радиокнопок (radiobutton). Пример:






На всякий случай привожу весь код целиком.
Html:

1
2
<input id="CheckBox" type="checkbox" class="CheckBoxClass">
<label id="Label" for="CheckBox" class="CheckBoxLabelClass">Кликни по мне!</label>

Css:

	.CheckBoxClass {
		display: none;
	}
	.CheckBoxLabelClass{
		background:url("UnCheck.png") no-repeat;
		padding-left: 30px;
		padding-top: 3px;
		margin: 5px;
		height: 28px;
		width: 150px;
		display: block;
	}
	.CheckBoxLabelClass:hover{
		text-decoration: underline;
	}
	.LabelSelected{
		background: url("Check.png") no-repeat;
	}

javascript:

 $(document).ready(function(){  
     $(".CheckBoxClass").change(function(){ 
         if($(this).is(":checked")){
             $(this).next("label").addClass("LabelSelected");
         }else{   
             $(this).next("label").removeClass("LabelSelected");
         }  
     });  
 });
Все темы на сайте

© 2017 BorPost · Копирование материалов сайта без разрешения запрещено