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

16

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

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

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

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

Отже, давайте почнемо з розмітки, яка може бути приблизно такою:

Таби

  • Таб 1
  • Таб 2
  • Таб 3

Вкладка 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!

Вкладка 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!

Вкладка 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!

Давайте трохи розберемо створену структуру вкладок. Кожна вкладка представляє з себе елемент списку. Назва вкладки вміщено у заслання, якір якої є тут ключовим. Справа в тому, що по якорю посилання ми можемо зв’язати вкладку з її текстом. Тексти вкладок поміщені в блок з ідентифікаторами, які просто дублюють якоря посилань.

Наприклад, ми маємо посилання з якорем #tabs-1. Також у нас є текст в блоці з ідентифікатором #tabs-1. Це і є та сама зв’язок вкладки з її текстом.

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

*{margin: 0; padding: 0;}
.wrapper{
width: 500px;
margin: 50px auto;
}
#tabs{
width: 100%;
}
#tabs ul{
list-style: none;
display: table-row;
}
#tabs ul li{
display: table cell;
background: #ccc;
height: 40px;
text-align: center;
border-left: 5px solid #fff;
}
#tabs ul li:first-child{
border-left: none;
background: #f3f3f3;
}
#tabs ul li a{
display: table cell;
width: 500px;
height: 40px;
line-height: 40px;
color: #000;
text-decoration: none;
font-size: 20px;
}
#tabs ul li a:hover{
color: #e8117f;
}
.tab-content{
border: 10px solid #f3f3f3;
}
.tabs-text{
padding: 10px;
/*display: none;*/
}

В результаті ми отримали класичні вкладки (таби). Залишилось реалізувати перемикання між вкладками, додавши табам необхідний функціонал. У наступному уроці ми з вами напишемо нескладний скрипт, який реалізує необхідний функціонал.

На цьому поточний урок завершено. До зустрічі в наступному уроці. Удачі!