Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Создаем эффектные вкладки (табы) для сайта

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

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

 

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

Начнем с подключения всех необходимых компонентов: библиотеку jQuery, файл стилей css и плагин tabulous.js, к документу где планируется использование вкладок. Для этого в разделе <head>...</head>, непосредственно перед закрывающим тегом </head> нашей 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>
<script type="text/javascript" src="tabulous.js"></script>
<script type="text/javascript" src="js.js"></script>

 
Обратите внимание, что мы используем вариант подключения фреймворка 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><!--Конец общего блока вкладок-->

 
Это все что касается общей структуры вкладок, ничего сверхъестественного и мудреного, пункты переключения вкладок в виде ссылок с атрибутом 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');
}

 
Как видите, все очень просто, остается добавить несколько новых фишек и плюшек 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: "progid: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: "progid: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: "progid: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: "progid: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: "progid: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: "progid: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: "progid: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: "progid: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({);
});

 
Выбрав тот или иной эффект для табов с содержанием, добавить соответствующую эффекту настройку, например, для переключения вкладок в виде слайдов прописываете следущие:

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

Инициализацию плагина и его настройки, вы можете разместить непосредственно в теле страницы, заключив в <script type="text/javascript"></script>, или же вынести в отдельный файл js, не забыв в последствии подключить его к документу, как показано в самом начале урока.
 
Вот и всё, проделав эту нехитрую работу, вы получите в свое распоряжение еще один замечательный инструмент в виде эффектных вкладок, для организации удобной и компактной подачи информации.

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

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

Буду благодарен, если поделитесь статьей в своих соц.сетях.

Всего комментариев: 37

Оставить комментарий

Ваш email не будет опубликован.

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