Пример №2. Вкладки

Код вкладок состоит из ярлыков и панелей. Создаем общий контейнер div, вмещаем все контейнеры, которые станут вкладками. Внутри этого контейнера создаем набор контейнеров div, делаем эти контейнеры скрытными за исключением контейнера соответствующего изначально видимой вкладке. Пишем функцию обработчиков событий, эта функция будет делать нужную вкладку видимой, а все остальные невидимыми. Так же она будет менять вид корешков таким образом, чтобы выделить гиперссылку вкладки соответствующим видом в данный момент. Рассмотрим HTML пример.

Макет страницы

Разработка интерфейса (HTML и CSS)

Листинг HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Панели вкладок</title>
<script src="jquery-1.6.3.min.js"></script>
<script type='text/javascript' src='vkladki.js'></script>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="text2">
<p><em><strong>Панели вкладок</strong></em></p>
</div>
<div id="all">
<ul class="tabs" >
<li><a href="#panel1" tabindex="1">Вкладка 1</a></li>
<li><a href="#panel2" tabindex="2">Вкладка 2</a></li>
<li><a href="#panel3" tabindex="3">Вкладка 3</a></li>
</ul>
<div class="panelContainer">
<div id="panel1" class="panel">
<h2>Содержимое панели 1</h2>
<p>Содержимое панели</p>
</div>
<div id="panel2" class="panel">
<h2>Содержимое панели 2</h2>
<p>Содержимое панели</p>
</div>
<div id="panel3" class="panel">
<h2>Содержимое панели 3</h2>
<p>Содержимое панели</p>
</div>
</div>
</body>
</html>

Листинг CSS

#all {
font-size: 14px;
margin-left: 40px;
width: 500px;
}
#text2 {
margin-left: 30px;
font-size: 25px;
color: black;
}
.tabs {
margin: 0;
padding: 0;
zoom: 1;
}
.tabs li {
float: left;
list-style: none;
padding: 0;
margin: 0;
}
.tabs a {
display: block;
text-decoration: none;
padding: 3px 5px;
background-color: rgb(110,138,195);
margin-right: 10px;
border: 1px solid rgb(153,153,153);
margin-bottom: -1px;
}
.tabs .active {
border-bottom: 1px solid white;
background-color: white;
color: rgb(51,72,115);
position: relative;
}
.panelContainer {
clear: both;
margin-bottom: 25px;
border: 1px solid rgb(153,153,153);
background-color: white;
padding: 10px;
}
.panel h2 {
color: rgb(57,78,121);
text-shadow: none;
}
.panel p {
color: black;
}

Добавление интерактивности

$(document).ready(function() {
$('.tabs a').click(function() {
// сохранение переменной $(this) для эффективности
var $this = $(this);
// скрыть панели
$('.panel').hide();
$('.tabs a.active').removeClass('active');
// активировать новую вкладку
$this.addClass('active').blur();
// идентификатор для отображения
var panel = $this.attr('href');
// показать панель
$(panel).fadeIn(250);
// не будет ссылки на низ страницы
return(false);
});
// открыть первую вкладку
$('.tabs li:first a').click();
});

Контрольные вопросы

  • Какие данные используются в программе?
  • Что делает программа с исходными данными?
  • Что происходит при щелчке на ссылку, в соответствии с кодом jQuery?
  • Каким образом добиваются, чтобы текущий ярлык по цвету отличался от других?
  • Каким образом в программе добиваются того, что при открытии страницы, открывается 1-я закладка?
  • Что в программе делают функции fadeOut (), fadeIn (), attr (), hide (), removeClass (), addClass ()?
  • Для чего можно использовать эту программу?