Необычные checkbox для сайта

На многих сайтах замечал различные checkboxы или проще говоря чеки, все они в основном одинаковые, по этому данной статье я расскажу как можно сделать более оригинальным Ваш сайт изменив в нем стандартные чеки на более креативные, кто то скажет что это мелочь, но именно такие мелочи помогут сделать ваш сайт более оригинальным и приятным для пользователя.

Для начала я хочу представить с чем мы вообще будем иметь дело:

Шаг 1. Создаем простую HTML-форму:

Двигаемся далее. Добавим в форму элементы списка и контроллы select и сancel для перекрытия флажков. В качестве контроллов у нас будут выступать простые ссылки с классами checkbox-select и checkbox-deselect соответственно:

Шаг 2. Придаем внешний вид

Выбранные элементы у нас будут зеленого цвета. Невыбранные — серого. Проще всего это сделать с помощью одного фонового изображения и сдвига его позиции, когда это необходимо.

В фотошопе подготавливаем фоновые изображения:

Элементы созданного нами списка будут составлять 105px в ширину и 150px по вертикали, поэтому checkboxbg.gif должна быть 210 пикселей в ширину (двойной ширины). Sendit.gif и select.gif будет служить в качестве фона для кнопок «Send it» и «Select», соответственно. Когда элемент будет выбираться, фоновое изображение будет сдвигаться, «показывая» свою зеленую половину. Как это сделать при использовании CSS:

Шаг 3. Используем CSS

Шаг 4. Подключаем эффекты jQuery

		

		
			

			

				

					

				

					
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
				
						
$(document).ready(function() {
$(".checklist .checkbox-select").click(
function(event) {
event.preventDefault();
$(this).parent().addClass("selected");
$(this).parent().find(":checkbox").attr("checked","checked");
}
);
$(".checklist .checkbox-deselect").click(
 function(event) {
 event.preventDefault();
 $(this).parent().removeClass("selected");
 $(this).parent().find(":checkbox").removeAttr("checked");
 }
 );
 });
					
				
			
		

Вот на этом пожалуй и все, надеюсь урок был вам интересен.

На главную