Створюємо ефектні вкладки (таби) для сайту

47
Дана стаття більше не актуальна у зв’язку з тим, що в процесі застосування було виявлено ряд суттєвих помилок даного рішення.
Щоб заповнити нарисовавшийся пробіл, замутив свою, більш легку і стабільну версію плагіна для створення вкладок (табів) Dm-tabs.js

Зростає армія користувачів використовують для серфінгу в інтернеті різні мобільні пристрої: iPhone, iPad, мобільні телефони і т. д і т. п. Всі ці сучасні гаджети мають різні дозволи та можливості екранів, а значить перед розробниками веб-сайтів ще гостріше постає питання юзабіліті, тобто логічність і простота в розташуванні елементів управління користувальницьких інтерфейсів, а так само організація більш компактною подачі інформації. Одним з популярних способів економії місця на сторінках сайтів є використання вкладки (tabs). Вкладки незамінні в ситуаціях коли на одній сторінці або в бічній панелі сайту необхідно розмістити об’ємну інформацію, використовуючи при цьому, як можна менший простір. В купе з загальним адаптивним дизайном, такі способи виведення вмісту стають все більш популярними серед веб-дизайнерів і розробників.
Плагінів для вкладок написано багато, всі вони різні і по виконанню і по функціональним можливостям, при бажанні ви завжди зможете знайти саме те що вам потрібно. Мене ж більше зацікавили різні ефекти використовуються при перемиканні вкладок і появі блоків з вмістом.
Сьогодні мені хотілося б розповісти і показати на прикладі, як з допомогою простого jQuery плагін працює у зв’язці з CSS переходами і трансформацією, можна створити чудові вкладки (таби) з цікавими ефектами.

Эффектные вкладки (табы) для сайта

Демо

Почнемо з підключення всіх необхідних компонентів: бібліотеку jQuery, файл стилів css і плагін tabulous.js до документу де планується використання вкладок. Для цього в розділі …, безпосередньо перед закриваючим тегом нашої html-сторінки, необхідно прописати наступне:

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

Зверніть увагу, що ми використовуємо варіант підключення фреймворка jQuery з бездонних сховищ Гугла. Не буду розписувати плюси і мінуси такого підключення, просто з ряду причин вважаю цей варіант підключення бібліотеки jQuery на сайт краще.

Плавно переходимо до html структурі самих табів, в тому місці сайту, де ви плануєте їх виводити, з допомогою div-ів і невеликого неупорядкованого списку ul, створимо каркас наших вкладок:

<div id="tabs">
<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">

</div>
<div id="tabs-2">

</div>
<div id="tabs-3">

</div>
</div>
</div>
  • Tab 1
  • Tab 2
  • Tab 3

Це все що стосується загальної структури вкладок, нічого надприродного і модерного, пункти перемикання вкладок у вигляді посилань з атрибутом href=”#tabs-1…”. відповідним ідентифікатором id того чи іншого блоку з вмістом табів.

Зовнішній вигляд вкладок (табів) сформуємо з допомогою CSS, а використовуючи нові функції CSS3 в зв’язці з плагіном jQuery, додамо трошки движухи нашим вкладок, тобто додамо деякі ефекти при перемиканні між вкладками і появи тексту.
У прикладі я використовував синьо-білі тони, в оригіналі переважає фіолетовий відтінок, ви можете експериментувати з колірною палітрою скільки завгодно, лише б в радість))).
Тепер давайте поглянемо на базові стилі CSS вкладок (табів), для деякої ясності прописав невеликі пояснення, так що розібратися що до чого і навіщо буде нескладно:

/* Базові стилі вкладок(табів) */
#tabs,#tabs2,#tabs3,#tabs4,#tabs5 {
width: 500px;
margin: 0 auto;
margin-bottom: 40px;
}
#tabs ul,#tabs2 ul,#tabs3 ul,#tabs4 ul,#tabs5 ul { margin-left:-40px;margin-bottom: 0px;}
#tabs li,#tabs2 li,#tabs3 li,#tabs4 li,#tabs5 li {
float: left;
margin-right: 2px;
list-style:none;
}
#tabs li a,#tabs2 li a,#tabs3 li a,#tabs4 li a,#tabs5 li a {
display: block;
padding: 17px 30px;
background: #544f6b;
text-decoration: none;
color: #8478B3;
}
#tabs li a:hover,#tabs2 li a:hover,#tabs3 li a:hover,#tabs4 li a:hover,#tabs5 li a:hover {
background: rgb(78, 74, 99);
}
#tabs_container {
padding: 40px;
overflow: hidden;
position: relative;
background: white;
}
#tabs_container div {
margin-right: 40px;
}
/* параграфи змісту табів */
p { font-weight: 400;
font-size: 1em;
padding: 0;
margin: 0;
text-align: left;
line-height: 1.5;
margin-bottom: 20px;
}
/* прибираємо виділення посилань пунктирною рамкою в FF і IE */
a:active,a:focus {
outline: expression(hideFocus='true');
}

/* Базові стилі вкладок(табів) */
#tabs,#tabs2,#tabs3,#tabs4,#tabs5 {
width: 500px;
margin: 0 auto;
margin-bottom: 40px;
}
#tabs ul,#tabs2 ul,#tabs3 ul,#tabs4 ul,#tabs5 ul { margin-left:-40px;margin-bottom: 0px;}
#tabs li,#tabs2 li,#tabs3 li,#tabs4 li,#tabs5 li {
float: left;
margin-right: 2px;
list-style:none;
}
#tabs li a,#tabs2 li a,#tabs3 li a,#tabs4 li a,#tabs5 li a {
display: block;
padding: 17px 30px;
background: #544f6b;
text-decoration: none;
color: #8478B3;
}
#tabs li a:hover,#tabs2 li a:hover,#tabs3 li a:hover,#tabs4 li a:hover,#tabs5 li a:hover {
background: rgb(78, 74, 99);
}
#tabs_container {
padding: 40px;
overflow: hidden;
position: relative;
background: white;
}
#tabs_container div {
margin-right: 40px;
}
/* параграфи змісту табів */
p { font-weight: 400;
font-size: 1em;
padding: 0;
margin: 0;
text-align: left;
line-height: 1.5;
margin-bottom: 20px;
}
/* прибираємо виділення посилань пунктирною рамкою в FF і IE */
a:active,a:focus {
outline: expression(hideFocus=’true’);
}

Як бачите, все дуже просто, залишається додати кілька нових фішок і булочок CSS3 такі, як transition для плавного переходу, елементи трансформації transform, і зовсім небагато прозорості opacity. Код в підсумку виходить об’ємним, але повірте, воно того варто.

.transition {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.make_transist {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.hidescale {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
-ms-filter: "програми:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
filter: alpha(opacity=0);
opacity: 0;
}
.showscale {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "програми:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hideleft {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-ms-filter: "програми:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.showleft {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
-ms-filter: "програми:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hidescaleup {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-ms-filter: "програми:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.showscaleup {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "програми:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hideflip {
-ms-filter: "програми:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: rotatey(-90deg) scale(1.1);
-moz-transform: rotatey(-90deg) scale(1.1);
-o-transform: rotatey(-90deg) scale(1.1);
-ms-transform: rotatey(-90deg) scale(1.1);
transform: rotatey(-90deg) scale(1.1);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.showflip {
-ms-filter: "програми:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
-webkit-transform: rotatey(0deg) scale(1);
-moz-transform: rotatey(0deg) scale(1);
-o-transform: rotatey(0deg) scale(1);
-ms-transform: rotatey(0deg) scale(1);
transform: rotatey(0deg) scale(1);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.tabulous_active {
background: white !important;
color: #655c89 !important;
}
.tabulousclear {
display: block;
clear: both;
}

.transition {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.make_transist {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.hidescale {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
-ms-filter: “програми:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
filter: alpha(opacity=0);
filter: alpha(opacity=0);
opacity: 0;
}
.showscale {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: “програми:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hideleft {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-ms-filter: “програми:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
filter: alpha(opacity=0);
opacity: 0;
}
.showleft {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
-ms-filter: “програми:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hidescaleup {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-ms-filter: “програми:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
filter: alpha(opacity=0);
opacity: 0;
}
.showscaleup {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: “програми:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hideflip {
-ms-filter: “програми:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: rotatey(-90deg) scale(1.1);
-moz-transform: rotatey(-90deg) scale(1.1);
-o-transform: rotatey(-90deg) scale(1.1);
-ms-transform: rotatey(-90deg) scale(1.1);
transform: rotatey(-90deg) scale(1.1);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.showflip {
-ms-filter: “програми:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
-webkit-transform: rotatey(0deg) scale(1);
-moz-transform: rotatey(0deg) scale(1);
-o-transform: rotatey(0deg) scale(1);
-ms-transform: rotatey(0deg) scale(1);
transform: rotatey(0deg) scale(1);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.tabulous_active {
background: white !important;
color: #655c89 !important;
}
.tabulousclear {
display: block;
clear: both;
}

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

$(document).ready(function ($) {
$('#tabs').tabulous({);
});

$(document).ready(function ($) {
$(‘#tabs’).tabulous({);
});

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

$('#tabs').tabulous({
effect: 'slideLeft'
});

$(‘#tabs’).tabulous({
effect: ‘slideLeft’
});

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

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

ДемоСкачать

Урок підготовлений на основі матеріалів http://git.aaronlumsden.com/tabulous.js/. Там же ви зможете ознайомитися з документацією, подивитися демо в оригіналі і при необхідності завантажити вихідні коди від першоджерела.

Удачі всім і теплого літа!

Буду вдячний, якщо поділитеся статтею у своїх соц.мережах.