Создание вкладок (табов). Урок 1

Создание вкладок (табов)

От автора: в данном уроке мы с Вами поговорим о создании табов на сайте. Табы — это ни что иное, как вкладки, позволяющие вместить большой объем информации, используя минимальный объем места. Вкладки очень естественно смотрятся, к примеру, в интернет-магазинах. Там в них часто помещают информацию о товаре: характеристики, описание товара и т.д.

Библиотека jQuery UI предлагает нам виджет Табы (http://jqueryui.com/tabs/), позволяющий с легкостью реализовать необходимый функционал. Однако, если вы не хотите подключать дополнительную библиотеку, если хотите реализовать вкладки, что называется с нуля, то данный урок как раз то, что вам нужно.

скачать исходникискачать урок

В данном уроке мы с вами создадим необходимую для табов разметку, а также напишем стили, позволяющие оформить табы соответствующим образом. При этом это не обязательно может быть «табовое» оформление… мы вполне можем использовать функционал урока для создания сайта-визитки, где контент страницы — это контент вкладки, ну а каждая конкретная вкладка — это ни что иное, как пункт меню. В общем, мы ограничены лишь нашей фантазией.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Итак, давайте начнем с разметки, которая может быть примерно такой:

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

Например, мы имеем ссылку с якорем #tabs-1. Также у нас есть текст в блоке с идентификатором #tabs-1. Это и есть та самая связь вкладки с ее текстом.

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

В результате мы получили классические вкладки (табы). Осталось реализовать переключение между вкладками, добавив табам необходимый функционал. В следующем уроке мы с вами напишем несложный скрипт, который реализует необходимый функционал.

На этом текущий урок завершен. До встречи в следующем уроке. Удачи!

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки: ,

Похожие статьи:

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

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

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

  1. антон

    День добрый!Можно вкладки сделать на чистом CSS. А урок хороший.

    • Андрей Кудлай

      День добрый.
      Конечно же, можно и на чистом CSS. Однако, добавив немного jQuery мы получим:
      1) все же более кроссбраузерный вариант… например, полученный вариант будет работать и на IE8… а, возможно, и на IE7 :)
      2) все же продукт с более расширяемым функционалом

  2. Юрий

    Спасибо, как раз про табы искал ифнормацию. Надо было вспомнить как создаются)

  3. Елена

    Спасибо, как всегда — уроки качественные и своевременные.

  4. Олег

    А когда выйдет второй урок?

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