slogin.info

ihc 468x60 1 1
Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна0 / 5
 
Автор: Администратор
Просмотров: 1650
Теги: html, form, input, checkbox, type, custom style

В этой статье средствами jQuery мы сделаем checkbox с пользовательскими стилями, изменив стандарный способ их отображения.

Подготовим разметку нашей будущей формы:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Демо-страница</title>
	<link rel="stylesheet" href="/css/template.css" type="text/css" />
	<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>
	<script type="text/javascript" src="/js/checkbox.js"></script>
</head>
<body>
	<form>
		<input type="checkbox" value="Красный" class="checkbox" />
		<input type="checkbox" value="Зелёный" class="checkbox" checked/>
		<input type="checkbox" value="Синий" class="checkbox" />
	</form>
</body>
</html>

Стоит обратить внимание, что всем чекбоксам, которые мы хотим стилизировать мы задаем класс checkbox.

Логика придачи необходимого вида чекбоксам будет у нас такая:

  1. Обёртываем каждый из оригинальных чекбоксов элементом <span>.
  2. Скрываем оригинальные чекбоксы, но так, чтобы они остались на странице.
  3. Задаем <span> два состояния - активное и не активное и соответствующие изображения чексбоксов для них.

Для удобства <span> будет иметь класс span_checkbox, а у активных так же будет добавляться класс active.

Теперь подготовим стили, в качестве нестандартного вида checkbox`ов будем использовать следующие два изображения:

checkbox activecheckbox unactive

А вот и стили необходимые:

.span_checkbox {
	background-image:url(../images/checkbox_unactive.png);
	background-repeat:no-repeat;
	background-position:center;
	height:14px;
	width:14px;
	display:block;
	float:left;
	cursor:pointer;
	margin:0 10px 0 0;
}

.span_checkbox.active {
	background-image: url('/../images/checkbox_active.png');
}

.span_checkbox .checkbox {position:absolute;
opacity:0;
z-index:-1;
}

Из них видно, как мы скрываем оригинальные чекбоксы, чтобы они оставались на странице, но не мешались.

Теперь добавляем jQuery код, который будет следовать нашей логике, описанной выше:

$(document).ready(function() { // Ждём загрузки страницы
	for (var i = 0; i < $('.checkbox').length; i++) { // Обходим все чекбоксы, которые нужно изменить
		var element = $($('.checkbox')[i]); // Получаем текущий чекбокс через jQuery
		if (element.attr("checked") == "checked") { // Если чекбокс по-умолчанию активный
			element.addClass('number'+i).wrap("<span class='span_checkbox active'></span>"); // то оборачиваем span`ом активным
		}
		else {
			element.addClass('number'+i).wrap("<span class='span_checkbox'></span>"); // оборачиваем не активным span`ом
		}
	}
	
	$(".span_checkbox").click(function(){ // Событие нажатия на span(мнимый чекбокс)
		var tmp = $(this); // Получаем нажатый span через jQuery
		if (tmp.hasClass('active')) { // Если мнимый чекбокс активный
			tmp.removeClass('active'); // то делаем его не активным
			tmp.children('.checkbox').removeAttr("checked"); // у настоящего чекбокса убираем выделение
		}
		else {
			tmp.addClass('active'); // иначе делаем его активным
			tmp.children('.checkbox').attr("checked", "checked"); // у настоящего чекбокс добавляем выделение
		}
	});
});

Как обычно - этот код обильно снабжен поясняющими комментариями.

Результат можно увидеть на Демо-странице:

demo

Или скачать исходники:

download

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • ZOMRO
    8.80
  • intuit89
    7.40
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Основы HTML. Урок №1. Как создать HTML документ?

С этой статьи я начинаю свой цикл, посвященный основам HTML, где я буду доступным и постараюсь понятным для новичков языком объяснять основы данного веб-языка.

Теги:

html, document, file

Комментариев: 0 Подробнее
Основы HTML. Урок №2. Структура страницы.

Продолжаю цикл статей, посвященный изучению основ HTML и это второй урок, в котором я расскажу вам о базовой структуре HTML странички и тут же мы поговорим о тегах.

Теги:

html, title, body, head

Комментариев: 0 Подробнее
Основы HTML. Урок №3. Некоторые теги тела документа.

Это третья статья, в цикле изучения основ HTML и в ней я расскажу вам о некоторых тегах, который используются в теле документа.

Теги:

html, tags, img, tag, div

Комментариев: 0 Подробнее

Последнее с форума

ZOMRO аватар
Дарим хорошее настроение и качественный сервис — этого заслуживает каждый наш клиент. Акции, бонусы...
Перейти в тему
ZOMRO аватар
Чем больше — тем дешевле! При заказе услуги VPS или виртуального хостинга и оплате его на длительны...
Перейти в тему
intuit89 аватар
[image] Всем привет! Меня зовут Михаил, я представляю команду, в составе: копирайтер, дизайнер и SM...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.