Создаём меню закладок для сайта, с помощью CSS и jQuery

css jquery

От автора: Одной из грандиозных проблем веб-дизайнеров является отыскание возможности поместить большое количество информации на странице, не потеряв при этом в юзабилити. Разбиение содержимого на закладки – отличный способ управиться с этим вопросом и последнее время очень широко используется в блогах. Сегодня мы намереваемся построить обычный небольшой информационный блок в HTML, в виде меню с закладками, затем введем его в действие, используя немного простого Javascript’а, и, наконец, сделаем то же самое при помощи библиотеки jQuery.

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

Шаг 1 в создании меню закладок

В первую очередь самое важное – нам нужно нечто, внушающее уважение. Поэтому предпримем быстрое путешествие в Photoshop и вуаля! – у нас есть хорошая модель того, как должен выглядеть компонент с закладками. Сделать его привлекательным довольно просто при помощи нескольких дополнительных градиентов. Вы можете использовать исходный файл Photoshop PSD для этого изображения, если захотите рассмотреть его получше, однако оно весьма простое и в действительности мы можем собрать его из плоского JPG.

css jquery

Шаг 2

Конечно, первое, что следует сделать при сборке – приблизительно представить, как вы собираетесь это сделать. Чем больше проектов вы разработали, тем легче. Глядя на это изображение, я бы сказал, что лучше всего:

Создать контейнер <div>, внутрь которого все поместить. Таким образом, если нужно расположить в определенном месте наш блок или сбросить его в sidebar, можно просто скопировать все, что обернуто в <div>, и где-нибудь его вставить.

Затем у нас будет область заголовка, возможно, с тэгом <h>.

Затем ниже этого у нас будет второй тэг <div>, который содержит закладки и контент. Это темно-серый блок в изображении.

Далее, внутри него мы используем неупорядоченный список <ul>, где каждый элемент является ссылкой на закладку. Это позволит нам использовать части <li> этого списка для позиционирования закладок, и их элементы <a> для придания стилей и установки ролловеров и режимов вкл/выкл (on/off).

Ниже мы создадим заключительную область <div>, которая будет содержать контент каждой закладки. Нам понадобится по одной такой области для каждой закладки, и мы будет показывать или скрывать их в зависимости от того, на которую из закладок щелкнули.

Итак, подведем итоги, получается что-то вроде этого:

<div>
	<h4>Heading</h4>
    <div>

        <ul>
            <li><a>Tab</a></li>
            <li><a>Tab</a></li>
            <li><a>Tab</a></li>
        </ul>

        <div>Content for Tab 1</div>
        <div>Content for Tab 2</div>
        <div>Content for Tab 3</div>

    </div>

</div>

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

А еще очень полезно продумать такую структуру до того, как у вас получится множество названий классов, id и контента, потому что позже станет сложно рассмотреть за деревьями лес. Особенно после того, как вы добавите контент ко всяким разным закладкам.

А теперь, когда у нас в мозгу сложилась картинка того, как построить свою структуру, давайте примемся за нее!

Шаг 3

Сейчас, если вы следовали моим учебникам на PSDTUTS, вы знаете, что я люблю хороший градиентный фон. Поэтому до структуры с закладками давайте сделаем отличный фон!

Откройте Photoshop, создайте документ размером 1000px x 1000px и нарисуйте красивый (subtle) радиальный градиент, такой, как показан ниже. Обратите внимание, что я нарисовал его, начиная с центральной точки сверху документа, и удостоверился, что градиент закончится до достижения края документа. Это означает, что я могу в HTML установить цвет фона более темным, и если кто-то увеличит окно браузера, то переход цвета будет плавным.

css jquery

Шаг 4

Итак, создайте для проекта новую директорию, затем создайте там внутри вторую, называемую images и сохраните внутри него изображение как background.jpg. При сохранении используйте File > Save for Web and Devices и выберите JPG, установив настройку качества (quality setting) примерно на 70. Получится файл размером 16kb, что очень неплохо. Бывали времена, когда приходилось действительно жадничать и экономить, но сейчас следует просто убедиться, что вы не слишком глупо расточительны с размерами своих файлов.

Теперь мы создает документ HTML и пишем кое-какой код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Tabbed Structure - Regular</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>
</body>
</html>

Это будет основой нашего HTML. Теперь мы создаем документ style.css и напишем следующее:

body {
	background-image:url(images/background.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	background-color:#657077;
	margin:40px;
}

Тут имеется парочка примечаний:

Можно написать тот же самый CSS, пользуясь сокращенной записью, и уменьшить количество используемых строк, но для написания учебника так получается гораздо понятнее и лучше!

У нас есть фоновое изображение (градиент) и мы установили его неповторяющимся, так как нам нужно, чтобы оно появилось всего однажды, оно отцентрировано и, наконец, цвет фона (#657077) – установлен более темным (прим. перев. – чем сам градиент).

Я добавил margin (поле) размером 40px. Это необходимо при последующем расположении материалов таким образом, чтобы все выглядело красиво.

Здесь можно видеть итоговый HTML-документ. Заметьте, что если вы меняете размер окна, фон остается красивым, плавно меняющимся, градуированным. Wunderbar! (Прекрасно! нем.)

Шаг 5

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Tabbed Structure - Regular</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

<div id="tabbed_box_1" class="tabbed_box">
	<h4>Browse Site <small>Select a Tab</small></h4>
    <div class="tabbed_area">

        <ul class="tabs">
            <li><a href="" id="tab_1" class="active">Archives</a></li>
            <li><a href="" id="tab_2">Topics</a></li>
            <li><a href="" id="tab_3">Pages</a></li>
        </ul>

        <div id="content_1" class="content">Content for Tab 1</div>
        <div id="content_2" class="content">Content for Tab 2</div>
        <div id="content_3" class="content">Content for Tab 3</div>

    </div>

</div>

</body>
</html>

Таким образом, как можно видеть, я в основном использовал ту же структуру, которую упоминал в Шаге 2. Просто я добавил немного id и class’ов, и некоторый реальный контент. Вот некоторые рассуждения, о том, что я сделал:

В качестве заголовка я поместил подсказку «Select a Tab» (выберите закладку) в элементе <small>. Это позволило пользоваться элементом <h4> для общего позиционирования и элементом <small> для изменения стиля и позиционирования подсказки.

У контейнера <div> установлены атрибуты id=”tabbed_box_1” и class=”tabbed_box”. Это сделано для того, чтобы иметь возможность пользоваться этим кодом несколько раз на одной и той же странице. В принципе, мы могли бы использовать только id, чтобы реализовать возможность располагать контейнеры в разных местах. Однако, при этом нам все еще необходимы классы, чтобы назначать стили. В противном случае, при использовании атрибута id для назначения стилей, нам придется определять одни и те же стили снова и снова для разных значений id.

Я назначил id ссылкам и областям контента, потому что для управления ими позже нам придется использовать Javascript.

Наконец, я назначил элементу <ul> название класса. На самом деле, мы могли бы назначить ему стили и без использования классов, просто при помощи styling .tabbed_area ul { }, но в этом случае он может перепутаться с нижеследующими <ul>’ами, которые мы поместим в область контента. Поэтому лучше всего иметь название класса, на которое потом ссылаться.

OK, без стилей выглядит все не очень …. пока!

css jquery

Шаг 6

Теперь при определении стилей для элементов, я думаю, лучше всего работать от внешнего элемента внутрь. Итак, мы начнем с этого элемента – <div id=”tabbed_box” class=”container”> – который используется, чтобы красиво расположить блок в центре нашего документа с помощью кода:

#tabbed_box {
	margin: 0px auto 0px auto;
	width:300px;
}

Шаг 7

А теперь проработаем область заголовка. Вот так можно назначить ему стили:

.tabbed_box h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:23px;
	color:#ffffff;
	letter-spacing:-1px;
	margin-bottom:10px;
}
.tabbed_box h4 small {
	color:#e3e9ec;
	font-weight:normal;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	position:relative;
	top:-4px;
	left:6px;
	letter-spacing:0px;
}

Здесь нужно кое-что заметить:

Вместо того, чтобы просто задать стили для элемента h4, я определил класс .tabbed_box h4. Это важно для больших HTML-документов, потому что где-нибудь еще у вас может оказаться другой стиль элемента h4. Так что придется убедиться, что вы не вызовете сейчас или в будущем проблем с наложением стилей.

Вы заметите, что я также установил нижнее поле (bottom margin) h4 на 10px. Это сделано для того, чтобы интервалы правильно выглядели. Важно помнить, что у многих элементов есть свойства по умолчанию. Например, у h4 уже есть нижнее поле, и оно больше, чем я бы хотел. Так что если мы его не установим сами, элемент появится с большим полем. Некоторые пользуются специальными таблицами стилей, которые переустанавливают все эти свойства по умолчанию, но я привык менять их по отдельности, когда мне это нужно.

Вы также увидите, что я использовал атрибут text-transform, чтобы текст внутри small был с заглавных букв. Конечно, можно было просто написать его большими буквами, но мне так больше нравится!

Вы также заметите, что в определениях для элемента small, установлено position:relative, для того, чтобы можно было регулировать расположение, сдвинув элемент вверх на 4px и вправо на 6px.

Наконец, при назначении стилей элементу h4 я определил ему отрицательный межбуквенный интервал (letter spacing), и это приведет к тому, что элемент small также унаследует этот отрицательный межбуквенный интервал, что нам вовсе не нужно. Так что тут я должен снова установить его в 0px. Это происходит благодаря тому факту, что стили каскадируются вниз – отсюда и название Cascading Style Sheets (каскадные таблицы стилей). Частенько вы будете замечать на своей странице, что что-то выглядит странно, и это будет происходить оттого, что элемент унаследовал какой-то стиль, о котором вы уже полностью забыли. Впервые столкнувшись с этим, я целую вечность глазел на малюсенький фрагмент, пытаясь понять, почему он выглядит таким сбившимся в кучку, пока не вспомнил!

Шаг 8

Дальше мы определим немножко стилей своему внутреннему <div> при помощи этого кода:

.tabbed_area {
	border:1px solid #494e52;
	background-color:#636d76;
	padding:8px;
}

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

Двигаясь от внешних границ, мы придали своему элементу определенную форму, и теперь гораздо легче увидеть то, как он будет выглядеть окончательно. Часто у вас также будут ограничения, возникающие из-за внешних границ, например, блок придется подогнать под колонку определенной ширины. Наконец, это просто хорошая идея – продвигаться от внешних границ, потому что в этом случае становится явным любое наследование стилей. Например, если пойти другим путем, и сначала реализовать внутренние элементы, тогда позднее заданные стили могут повлиять на внутренние элементы и это приведет к необходимости возвращаться и все переделывать.

css jquery

Шаг 9

Теперь переходим к хорошему — закладкам! Если добавить этот фрагмент CSS, мы преуспеем в том, чтобы сделать их уже более похожими на закладки:

ul.tabs {
	margin:0px; padding:0px;
}
ul.tabs li {
	list-style:none;
	display:inline;
}

Этот код говорит, что элемент <ul> с классом ‘tabs’ не должен иметь полей и отступа. Еще он говорит о том, что все элементы <li> внутри не должны иметь маркеров. Наконец, мы меняем display с ‘block’ по умолчанию на ‘inline’. Разрешите мне объяснить последнее более детально.

В целом у элементов на странице есть три распространенных значения для ‘display’. Это — block, inline, или none.

Установка элемента на none сделает его невидимым. Мы используем это обстоятельство попозже.

Установка элемента на inline заставит его смещаться относительно других элементов так, как это происходит для текстов. Так что в нашем случае, вместо появления одного под другим, элементы <li> будут смещаться по горизонтали.

Установка элемента на block делает из него прямоугольную область, которая, как правило, появляется под последним элементом.

Это, конечно, упрощенное объяснение

Шаг 10

Конечно, наши «закладки» пока выглядят довольно паршиво, так что давайте придадим им стилей. Мы пользовались элементом <li>, чтобы их позиционировать, а для привязки стилей используем элемент <a>, как здесь:

ul.tabs li a {
	background-color:#464c54;
	color:#ffebb5;
	padding:8px 14px 8px 14px;
	text-decoration:none;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	border:1px solid #464c54;
}
ul.tabs li a:hover {
	background-color:#2f343a;
	border-color:#2f343a;
}
ul.tabs li a.active {
	background-color:#ffffff;
	color:#282e32;
	border:1px solid #464c54;
	border-bottom: 1px solid #ffffff;
}

Вот что мы здесь сделали:

Назначили стили тэгу <a> так, что он теперь имеет правильный фон и цвет текста, а также установки шрифта.

Создали второй стиль для a:hover и затемнили цвет фона и рамку. Обратите внимание, что нам не нужно определять все остальные установки <a>, потому что они наследуются. Мы лишь должны установить те, которые должны изменяться, когда пользователь проводит мышью над закладкой.

И наконец, у нас есть третий стиль на тот случай, когда <a> имеет class=”active”. Другими словами, для выбранной закладки. Здесь мы опять устанавливаем цвет фона на белый и меняем цвет текста. Следует обратить внимание на то, что мы также меняем нижнюю границу рамки на белый цвет. Так что закладка будет выглядеть так, как будто она присоединена к области контента (когда мы ее попозже добавим!)

css jquery

Шаг 11

Чтобы область контента заработала, нам нужно сделать две вещи. Первая – мы должны сделать так, чтобы две остальные площадки исчезали, а вторая – чтобы к ним были применены стили и они выглядели подобающим образом.

.content {
	background-color:#ffffff;
	padding:10px;
	border:1px solid #464c54;
}
#content_2, #content_3 { display:none; }

Как вы можете видеть, первая часть CSS говорит браузеру, что все элементы с class=”content” должны быть белыми с отступом и рамкой (того же цвета, что и закладки). Вторая часть говорит, что элементы с id=”content_2” и id=”content_3” должны иметь display:none, или другими словами, должны быть невидимы.

Позже, когда добавится Javascript, мы сможем использовать скрипт, переключающий display:none и display:block, чтобы они показывались и скрывались.

Итак, вот как выглядят наши закладки, а также можно посмотреть HTML-версию того, на каком этапе мы находимся. Как видите, сейчас они выглядят близкими к завершению, но нам нужно закрепить пробелы и добавить немного реального содержимого.

css jquery

Шаг 12

Закрепление пробелов в действительности довольно простое дело, состоящее в добавлении полей к элементу <ul>, как здесь:

ul.tabs {
	margin:0px; padding:0px;
	margin-top:5px;
	margin-bottom:6px;
}

Если быть исключительно честным, я не уверен, почему возникла проблема с пробелами. Иногда HTML меня озадачивает, но я просто изменяю настройки до тех пор, пока ситуация не исправляется. Иногда по мере продвижения я выясняю причину, иногда нет. Думаю, то, о чем я сейчас говорю, означает, что, если вы вдруг действительно собираетесь смело полезть в скучные подробности спецификаций W3 наудачу, то рано или поздно наткнетесь на какие-то проблемы, которые не сможете объяснить. Не позволяйте им сбить вас с толку, просто переделывайте до тех пор, пока не найдете исправление или метод разрешения проблемы.

Шаг 13

Сейчас добавим в область контента некоторое содержимое. До сих пор я этого избегал, потому что хотел, чтобы наш HTML выглядел простым. Вот кое-что:

<div id="tabbed_box_1" class="tabbed_box">
	<h4>Browse Site <small>Select a Tab</small></h4>
    <div class="tabbed_area">

        <ul class="tabs">
            <li><a href="" id="tab_1" class="active">Topics</a></li>
            <li><a href="" id="tab_2">Archives</a></li>
            <li><a href="" id="tab_3">Pages</a></li>
        </ul>

        <div id="content_1" class="content">
        	<ul>
            	<li><a href="">HTML Techniques <small>4 Posts</small></a></li>
            	<li><a href="">CSS Styling <small>32 Posts</small></a></li>
            	<li><a href="">Flash Tutorials <small>2 Posts</small></a></li>
            	<li><a href="">Web Miscellanea <small>19 Posts</small></a></li>
            	<li><a href="">Site News <small>6 Posts</small></a></li>
            	<li><a href="">Web Development <small>8 Posts</small></a></li>
			</ul>
        </div>
        <div id="content_2" class="content">
        	<ul>
            	<li><a href="">December 2008 <small>6 Posts</small></a></li>
            	<li><a href="">November 2008 <small>4 Posts</small></a></li>
            	<li><a href="">October 2008 <small>22 Posts</small></a></li>
            	<li><a href="">September 2008 <small>12 Posts</small></a></li>
            	<li><a href="">August 2008 <small>3 Posts</small></a></li>
            	<li><a href="">July 2008 <small>1 Posts</small></a></li>
			</ul>
        </div>
        <div id="content_3" class="content">
        	<ul>
            	<li><a href="">Home</a></li>
            	<li><a href="">About</a></li>
            	<li><a href="">Contribute</a></li>
            	<li><a href="">Contact</a></li>
			</ul>
        </div>

    </div>

</div>

Итак, тут я просто добавил группу неупорядоченных списков в три области для контента. Кстати, я делал эту вещь для использования в блоге WordPress. Но в действительности вы можете пользоваться закладками для чего угодно. Новая домашняя страница FlashDen, над которой я работал несколько дней назад, использует области с закладками для показа разных видов недавно добавленных файлов.

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

.content ul {
	margin:0px;
	padding:0px 20px 0px 20px;
}
.content ul li {
	list-style:none;
	border-bottom:1px solid #d6dde0;
	padding-top:15px;
	padding-bottom:15px;
	font-size:13px;
}
.content ul li a {
	text-decoration:none;
	color:#3e4346;
}
.content ul li a small {
	color:#8b959c;
	font-size:9px;
	text-transform:uppercase;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	position:relative;
	left:4px;
	top:0px;
}

И снова определяем стили вышеуказанным спискам. На этот раз я, вместо того, чтобы установить элементу <ul> имя класса, просто добавил стили всем элементам <ul> внутри элементов с классом class=”content”. Это значит, что мне не придется писать много имен классов в свой HTML, что делает его четче и чище.

Вот еще кое-что, заслуживающее внимание:

Снова мы убрали маркеры списка (bullet points) у элементов <li> при помощи list-style:none.

На этот раз мы определяем стили элементам списка, а не элементам <a>. Это важно, потому что у нас может быть пункт меню, который не является ссылкой, и, таким образом, он бы прекрасно подходил.

Еще раз я использовал обернутый <small> внутри <a>, чтобы сделать счетчик постов. Я использовал text-transform, чтобы сделать его состоящим только из заглавных букв, и некоторое относительное смещение, чтобы слегка подвинуть его вправо.

Шаг 14

И вот как теперь выглядит наша страница:

css jquery

В общем и целом он весьма хорош, за исключением того, что у нас имеется слишком много рамок. Но все в порядке, мы можем все исправить волшебным псевдоселектором под названием ‘last-child‘ как здесь:

.content ul li:last-child {
	border-bottom:none;
}

Этот стиль просто применяется к последнему элементу своего собственного типа — т.е. к последнему элементу <li>. Здесь я должен указать, что тот способ работает не во всех браузерах. Особенно его не любит Internet Explorer 6. Но это нормально, потому что жизнь не заканчивается, если вдруг там оказалась рамка, и это мое ноу-хау наказать любого, у кого до сих пор нет браузера, даже отдаленно напоминающего современный:)

Шаг 15

Теперь еще один шаг к завершению нашего HTML, и касается он неких красивых фоновых изображений для наших элементов. Как вы помните, некоторые элементы в моем первоначальном файле PSD имели едва различимые градиенты. Так что теперь самое время их добавить. Есть три части градиента: а) на активной закладке; б) на неактивных закладках и, в) на нижней рамке области контента. Вот три изображения, которые нам понадобятся:

css jquery

Их немного трудно увидеть, и по существу каждое из них — маленький фрагмент градиента, который мы установим как повторяющиеся фоновое изображение. Вот крупным планом одна из закладок. Обратите внимание, я добавил вокруг нее тонкую рамку, так что стало видно четче. И заметьте, сверху есть белая линия в 1px. Она сделает внешний вид закладки действительно отчетливым.

css jquery

Итак, чтобы добавить фоновые изображения, нам нужно сделать небольшие настройки в коде CSS, как здесь:

ul.tabs li a {
	background-image:url(images/tab_off.jpg);
	background-repeat:repeat-x;
	background-position:bottom;
}
ul.tabs li a.active {
	background-image:url(images/tab_on.jpg);
	background-repeat:repeat-x;
	background-position:top;
}
.content {
	background-image:url(images/content_bottom.jpg);
	background-repeat:repeat-x;
	background-position:bottom;
}

Заметьте, что в действительности я вставил эти дополнительные части кода вместе с остальными определениями класса, но для экономии места здесь привожу только добавленный фрагмент. Как можно видеть во всех трех случаях, мы повторяем фоновое изображение только по оси х. В двух случаях (закладки off и область контента) мы делаем это вдоль нижней линии, а для закладки on – вдоль верхней.

Стили закончены!

И на этом мы официально закончили часть HTML/CSS этого учебника. Законченную страницу со стилями можно видеть здесь.

css jquery

Добавляем несложный скрипт

Следующее, что мы должны сделать – это добавить немного Javascript, чтобы наши закладки действительно что-то делали. Сначала мы собираемся сделать это вручную, а затем я покажу вам, как для выполнения того же самого использовать библиотеку Javascript. Здесь я должен отметить, что я не знаток JS, и надеюсь привлечь сюда настоящих мастеров по программированию для написания учебника, так что если заметите, что я делаю нечто, вызывающее ваше сомнение, не стесняйтесь оставить комментарий, а я исправлю учебник и сделаю его еще немного лучше!

Итак, сначала давайте обрисуем, что мы должны делать, когда кто-то щелкает на закладку. Нам нужно выключить текущую закладку, включить новую, спрятать текущую область содержимого и показать новую.

Для этого у нас могло бы быть что-нибудь заумное, что определяет, какая из закладок сейчас включена и выключает ее, но проще всего выключить их все, а затем включить ту, которая нам нужна. Точно так же для областей содержимого — мы можем спрятать все три, а затем показать нужную. Так мы сэкономим на необходимости определять текущее положение дел.

Поиск элементов с помощью DOM

Элементы, с которыми мы работаем, выглядят таким образом:

<a href=”” id=”tab_1” class=”active”>

<div id=”content_1” class=”content”>

Поэтому в Javascript мы можем искать элемент, просто используя его id и метод document.getElementById(). Таким образом, document.getElementById(‘content_1′) даст нам первую область содержимого. Далее мы можем установить ее стиль отображения на none, использовав эту строку кода:

document.getElementById(‘content_1′).style.display = ‘none’;

Чтобы изменить подобным образом класс, мы используем:

document.getElementById(‘tab_1′).className = ‘active’;

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

function tabSwitch(new_tab, new_content) {

	document.getElementById('content_1').style.display = 'none';
	document.getElementById('content_2').style.display = 'none';
	document.getElementById('content_3').style.display = 'none';
	document.getElementById(new_content).style.display = 'block';	

	document.getElementById('tab_1').className = '';
	document.getElementById('tab_2').className = '';
	document.getElementById('tab_3').className = '';
	document.getElementById(new_tab).className = 'active';		

}

Этот код мы поместим в файл и давайте назовем его functions.js. Далее мы можем вызывать этот скрипт, поменяв ссылки в закладках:

<script src="functions.js" type="text/javascript"></script>
<ul class="tabs">
    <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">Topics</a></li>
    <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">Archives</a></li>
    <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">Pages</a></li>
</ul>

Можете быть уверены, это пример суперпростого javascript’а. И он работает!

Более сложный скрипт

В данный момент, у нашего скрипта имеются заметные проблемы. И не последняя из них – то, что если вы добавляете еще одну закладку, приходится менять функцию. А если у вас на странице имеется более одного набора закладок, то понадобится две функции! Так что давайте их немного изменим:

function tabSwitch_2(active, number, tab_prefix, content_prefix) {

	for (var i=1; i < number+1; i++) {
	  document.getElementById(content_prefix+i).style.display = 'none';
	  document.getElementById(tab_prefix+i).className = '';
	}
	document.getElementById(content_prefix+active).style.display = 'block';
	document.getElementById(tab_prefix+active).className = 'active';	

}

Вторая версия функции переключения закладок принимает на пару параметров больше, но она более эффективна. Она предполагает, что у нас есть набор закладок и набор областей содержимого, и у каждого из них есть id, который представляет собой префикс для последовательности возрастающих чисел. Т.е. tab_1, tab_2 … и content_1, content_2 …

Первый параметр, который принимает наша функция, ‘active’ – это номер закладки/содержимого, которую нужно включить. Второй параметр, ‘number’ – количество используемых закладок. Третий и четвертый параметры – префиксы, используемые в id наших элементов.

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

Таким образом, в нашем примере, чтобы вызвать функцию, мы будем использовать вот этот код:

<script src="functions.js" type="text/javascript"></script>
<ul class="tabs">
    <li><a href="javascript:tabSwitch_2(1, 3, 'tab_', 'content_');" id="tab_1" class="active">Topics</a></li>
    <li><a href="javascript:tabSwitch_2(2, 3, 'tab_', 'content_');" id="tab_2">Archives</a></li>
    <li><a href="javascript:tabSwitch_2(3, 3, 'tab_', 'content_');" id="tab_3">Pages</a></li>
</ul>

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

Смотрите второй пример javascript.

Используем jQuery

В последнее время появлялось множество библиотек Javascript, и на самом деле существует (по меньшей мере) две, которые особенно подходят для реализации эффекта закладок: MooTabs и DomTab. Я не пользовался ни той, ни другой, но при поверхностном взгляде они смотрятся вполне готовыми к использованию.

Однако, так как я много слышал о библиотеке jQuery, я решил попробовать то же самое переключение закладок, используя jQuery. Чувствую, что мое решение потребует усилий, но все же было бы интересно просмотреть, что получится.

Итак, во-первых, посетите сайт jQuery и скачайте последнюю версию их библиотеки скриптов.

css jquery

Как прикрутить jQuery

jQuery предоставляет собой набор функций, которые позволяют выбирать множество вещей. Например, если вы хотели бы отобрать каждый элемент на странице, который является ссылкой (т.е. элементы <a>), а затем заставить их исчезнуть, вы поместили бы в область <head> вот это:

<script src="scripts/jquery-1.2.3.min.js">
<script>

	// When the document loads do everything inside here ...
	$(document).ready(function(){

		$("a").slideUp();

	});
</script>

Первая строка добавляет библиотеку скрипта jQuery. Основная область скрипта находится внутри части кода, которая выглядит так: $(document).ready(function(){}); Она по существу говорит браузеру выполнять все, находящееся внутри, когда он обращается к странице. В нашем случае, мы выполняем команду:

$("a").slideUp();

Эта команда требует найти все, что является элементом <a> и выполнить над ним slideUp(). Или другими словами: найти все ссылки и заставить их исчезнуть с эффектом скольжения. Попробуйте добавить этот скрипт к странице и загрузить ее, и вы увидите, что все ваши ссылки исчезли. Очень аккуратно, да?

Так или иначе, для выбора чего-то существует множество путей, и прочесть о них можно в API и документации. Можете находить каждый элемент с определенным классом, определенным id и тому подобное. Когда-нибудь я напишу здесь надлежащее введение в учебник jQuery, но в данное время достаточно этого крошечного введения – помимо часовой практики в jQuery, я полагаю, с моей стороны будет нечто вроде пародии писать для этого введение!

Управление при помощи селекторов

Итак, после небольшого эксперимента я пришел к мысли использовать jQuery, чтобы заставить свои закладки исчезать и появляться. Чтобы это сделать, я, во-первых, изменил свои ссылки так, чтобы в них не было никакого javascript’а, но был атрибут title и дополнительный класс class=”tab”. Обратите внимание, что можно также назначить элементу два класса, сделав следующее: class=”tab active”.

<ul class="tabs">
    <li><a href="#" title="content_1" class="tab active">Topics</a></li>
    <li><a href="#" title="content_2" class="tab">Archives</a></li>
    <li><a href="#" title="content_3" class="tab">Pages</a></li>
</ul>

Теперь, используя эти два элемента, по существу я могу получить все ссылки с классом ‘tab’ и также я смогу найти любой элемент, чей id равняется атрибуту title ссылки, которую только что нажали. Вот скрипт (помещенный в <head>), который иллюстрирует вышеизложенное:

 <script src="scripts/jquery-1.2.3.min.js"></script>
   <script>

  // Когда документ загружается, все происходит здесь внутри ...  
  $(document).ready(function(){

	// Когда на ссылку щелкнули  
	$("a.tab").click(function () {

		// выключить все закладки  
		$(".active").removeClass("active");

		// включить эту закладку  
		$(this).addClass("active");

		// свернуть все элементы с классом 'content' 
		$(".content").slideUp();

		// теперь определить значение атрибута 'title'  и найти элемент с этим id.  Затем развернуть его. 
		var content_show = $(this).attr("title");
		$("#"+content_show).slideDown();

	});

  });
 </script>

Для облегчения понимания я добавил комментарии. В основном, когда щелкают любую ссылку с классом ‘tab’, мы все делаем внутри этой функции.

А чтобы увидеть последний пример, работающий с jQuery, щелкните здесь!

Поздравляем, мы закончили создание меню закладок для сайта, средствами HTML, CSS и jQuery надеюсь вам понравилось!

Автор: Collis Ta’eed

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: http://net.tutsplus.com

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (16)

  1. sergey

    Очень доступно и очень полезная информация

  2. Сергей

    Статья понравилась, но в javascript пока не сильно силен (с jQuery подавно не дружу еще). Хотя на первый взгляд все понятно, читать было интересно. СПС за материал.

  3. sydorov

    Спасибо, будем пробовать

  4. Игорь

    Спасибо Андрей, прочитал , доступно, но нехватает время , еще предидущие уроки полностью не освоил, благодарю за обучение!

  5. Андрей

    Полезный материал.Да у вас плохого я и не встречал.Буду ждать следующих.Надеюсь что не долго.

  6. Станислав

    Статья то что надо, давно искал что то подобное. Спасибо что показали и бесплатно!

  7. Олег

    Получил три письма. Спасибо авторам за полезную информацию, доступно изложенную, и безоговорочно необходимую многим.

  8. Георгий

    Спаибо! Как всегда, интересно.

  9. Ольга

    С удовольствием прошла весь урок. Это мое первое знакомство со скриптами. Буду пробовать применить полученные знания. Спасибо и — надеюсь на новые, столь же подробные уроки!

  10. Борис

    Спасибо за урок. За jQuery и Javascript будущее.
    Постоянно внедряю на сайтах.

  11. Андрей

    Спасибо за урок! долго мучался с javascript примером, но он у меня так и не заработал, хотя уже дошло до того что весь код скопировал с сайта, не помогло, решил идти дальше к jquery он у меня работает нормально, еще раз спасибо за урок!!!

  12. Ekaterina

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

  13. Андрей

    Хорошая статья, мне очень нравиться! Сколько не искал, не мог хоть что-то разобрать, а тут очень доступно, а главное в голове что-то откладывается! Большое спасибо за Ваши труды!

  14. Сергей

    Доброе время суток!
    очень полезная статья!!! Но не могли бы вы расказать как применить ее к вордпрес к контенту?!
    Зарание спасибо!

  15. RagALexxx

    Спасибо за труды!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree