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

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

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

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

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

Шаг 2

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

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

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

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

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

Шаг 3

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

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

Шаг 4

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

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

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

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

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

Шаг 5

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

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

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

Шаг 6

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

Шаг 7

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

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

Шаг 8

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

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

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

Шаг 9

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

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

Шаг 10

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

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

Шаг 11

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

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

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

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

Шаг 12

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

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

Шаг 13

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

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

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

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

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

Шаг 14

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

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

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

Шаг 15

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Используем jQuery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Collis Ta’eed

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

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

E-mail: contact@webformyself.com

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

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

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

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