Организация контента страницы таким образом, чтобы было и красиво, и информативно очень нелегкое дело. Деление информации на разделы или вкладки очень кстати в этом деле. Это позволяет нам вместить больше информации в ограниченное пространство и предоставить структурированный способ доступа к ней.

Сегодня мы создадим вкладки с помощью jQuery, CSS3 и технологий AJAX.

Шаг 1 - XHTML

Как обычно, мы начинаем с разметки

<ul class="tabContainer">
<!-- Сгенерированные вкладки с помощью jQuery будут тут -->
</ul>
<div class="clear"></div>
<div id="tabContent">
<div id="contentHolder">
<!-- Вырванный с помощью AJAX контент будет тут -->
</div>
</div>

Если Вам кажется, что разметка очень простая, Вы абсолютно правы. У нас нет кода для вкладок, так как он будет динамически генерироваться с помощью jQuery. Таким образом добавление новых вкладок будет очень простым, так как Вам стоит лишь изменить немного кода в Javascript файле.

demo.html

<li>
<a href="#" class="tab green">Tab two
<span class="left"></span>
<span class="right"></span>
</a>
</li>

Такая вот будет разметка для каждой вкладки. Она состоит из элемента li, который находится внутри неупорядоченного списка .tabContainer выше, и содержит ссылку с двумя span. Они показывают левую и правую часть фона, тем самым позволяют нашим вкладкам растягиваться и показывать текстовые ярлыки.

Также обрати внимание на класс ссылки green - он определяет фон, цвет текста и состояние при наведении мышки.

Шаг 2 - CSS

После разметки давайте посмотрим на стили:

styles.css - часть 1

.tabContainer{
	/* The UL */
	float:right;
	padding-right:13px;
}

#contentHolder{
	background-color:#EEEEEE;
	border:2px solid #FFFFFF;
	height:300px;
	margin:20px;

	color:#444444;
	padding:15px;
}

#tabContent{
	background-color:#333;
	border:1px solid #444;
	margin-top:-15px;
	width:100%;
}

#tabContent, .tabContainer li a,#contentHolder{
	-webkit-box-shadow:0 0 2px black;
	-moz-box-shadow:0 0 2px black;
	box-shadow:0 0 2px black;
}

.tabContainer li{
	/* Все элементы LI выстрояться друг за другом */
	display:inline;
}

.tabContainer li a,.tabContainer li a:visited{
	/* Ссылки вкладок превращаются в красочные кнопки */

	float:left;
	font-size:18px;

	/* display:block позволяет расширить список применимых CSS правил, таких как отступы (paddings): */
	display:block;

	padding:7px 16px 1px;
	margin:4px 5px;
	height:29px;

	/* Позиционируем */
	position:relative;

	/* CSS3 текстовые тени */
	text-shadow:1px 1px 1px #CCCCCC;
}

Выше представлено несколько CSS3 правил, которые придают страницы красивый вид. В начале, свойство box-shadow, которое добавляет тени под вкладками (#tabContent div и #contentHolder).

Далее идет свойство text-shadow, которое отвечает за цветную тень (outer glow другими словами) вокруг вкладок.

styles.css - часть 2

#overLine{
	/* Линия над активной кнопкой. */
	position:absolute;

	height:1px;
	background-color:white;
	width:90px;

	float:left;
	left:1px;
	top:-5px;
	overflow:hidden;
}

#main{
	margin:0 auto;
	position:relative;
	width:700px;
}

ul .left{
	/* Левый span в ссылке */

	height:37px;
	left:0;
	position:absolute;
	top:0;
	width:10px;
}

ul .right{
	/* Правый span в ссылке */

	height:37px;
	right:0;
	position:absolute;
	top:0;
	width:10px;
}

/* Придаем стиль индивидуально для каждого цвета: */

ul a.green{	background:url(img/green_mid.png) repeat-x top center;	color:#24570f;}
ul a.green span.left{ background:url(img/green_left.png) no-repeat left top;}
ul a.green span.right{ background:url(img/green_right.png) no-repeat right top;}

/* .. Аналогично .. */

/* Состояние при наведении мышки: */
ul a:hover{	background-position:bottom center; text-decoration:none;}
ul a:hover span.left{ background-position:left bottom;}
ul a:hover span.right{ background-position:right bottom;}

.preloader{
	display:block;
	margin:120px auto;
}

Во второй части кода мы определяем фоновое изображение для ссылки + правый и левый span, в зависимости от цвета.

Шаг 3 - jQuery

Вот и пришло время магии. Первым делом в шапке документа подключаем библиотеку jQuery:

<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

Вначале мы подключили непосредственно саму библиотеку из репозитория Гугла, и следом подключили наш скрипт.

Вот подробное объяснение того, что будет делать jQuery:

- При открытии страницы подгружается скрипт из репозитория гугла
- При полной загрузке страницы $(document).ready() функция, которая предоставлена в качестве параметра, выполняется
- Объект Tabs проходит несколько итераций (циклов) с помощью метода $.each() и несколько элементов LI создаются и прибавляются к .tabContainer <UL>
- Событие click настраивается и готово к использованию (при нажатии загружаются разные вкладки)

Давайте взглянем на код:

script.js - Часть 1

$(document).ready(function(){
	/* Код выполняется после загрузки страницы */

	/* Определяем массив с вкладками и соответствующими AJAX страницами: */

	var Tabs = {
		'Tab one'	: 'pages/page1.html',
		'Tab two'	: 'pages/page2.html',
		'Tab three'	: 'pages/page3.html',
		'Tab four'	: 'pages/page4.html'
	}

	/* Доступные цвета для вкладок: */
	var colors = ['blue','green','red','orange'];

 	/* Цвета линии над вкладками (активными): */
	var topLineColor = {
		blue:'lightblue',
		green:'lightgreen',
		red:'red',
		orange:'orange'
	}

	/* Цикл: */
	var z=0;
	$.each(Tabs,function(i,j){
		/* Sequentially creating the tabs and assigning a color from the array: */

		var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');

		/* Указываем информацию о странице по каждой ссылке: */

		tmp.find('a').data('page',j);

		/* Добавляем вкладку к контейнеру UL: */
		$('ul.tabContainer').append(tmp);
	})

Как Вы видите по коду выше можно легко добавлять новые вкладки. В массив выше достаточно добавить название вкладки и страницу с контентом.

Во второй части кода мы увидим в действии jQuery 1.4. Мы создадим новый элемент div (который выполняет роль черты над активной вкладкой) и передадим объект с ID и CCSS свойствами вместо определения их по отдельности с помощью методов .attr() и .css().

script.js - Часть 2

		/* Кэшируем вкладки в переменную для лучшей производительности: */
	var the_tabs = $('.tab');

	the_tabs.click(function(e){

		/* "this" указывает на нажатую ссылку вкладки: */
		var element = $(this);

 		/* Если активно, вернуть false и выйти: */
		if(ement.find('#overLine').length) return false;
&n 		/* Определяем цвет вкладки: */

		var bg = element.attr('class').replace('tab ','');

 		/* Убираем линию: */
		$('#overLine').remove();

 		/* Создаем новый элемент div с помощью jQuery 1.4 передавая дополнительный параметр объекта: */

		$('<div>',{			id:'overLine',
			css:{
				display:'none',
				width:element.outerWidth()-2,
				background:topLineColor[bg] || 'white'
			}}).appendTo(element).fadeIn('slow');
&n 		/* Проверяем была ли кэширована страница вырванная AJAX: */

		if(!ement.data('cache'))
		{
					/* Если кэша нет, показать gif анимацию загрузки и выполнить AJAX запрос: */
			$('#ntentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');

 			$.get(element.data('page'),function(msg){
				$('#contentHolder').html(msg);
&n 				/* После получения страницы, добавить в кеш для текущей ссылки: */
				element.data('cache',msg);
			});		}
		else $('#contentHolder').html(element.data('cache'));

 		e.preventDefault();
	})

	/	/* Эмулируем нажатие на первую вкладку, чтобы область с контентом не была пустой: */
	the_tabs.eq(0).click();

});

Обратите внимание на использование метода data() по всему коду. Он присваивает информацию элементу вызывая метод с 2-мя параметрами $(‘#selector’).data(‘label’,”String Data”). Это присваивает строку “String Data” элементу и мы можем позже к ней обратиться (или проверить) вызывая метод без второго параметра.

Таким образом мы создали простую кэш систему для AJAX запросов. При первом AJAX запросе, текст ответа (который находится в переменной msg) сохраняется в data(‘cache’). При последующих запросах проверяется кэш на наличия информации. Если там уже есть текст, повторные запросы не нужны. Таким образом мы убираем лишнюю нагрузку на сервер и улучшаем время отклика вкладок.

Заключение

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

Очень интересный урок получился! Не правда ли?