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

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

Данная статья больше не актуальна в связи с тем, что в процессе применения были выявлены ряд существенных ошибок данного решения.
Дабы восполнить нарисовавшийся пробел, замутил свою, более лёгкую и стабильную версию плагина для создания вкладок (табов) 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/. Там же вы сможете ознакомиться с документацией, посмотреть демо в оригинале и при необходимости скачать исходники от первоисточника.

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

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

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Комментирование в настоящее время закрыто.
28 комментариев
  1. Алекс says:

    Есть недороботка. Посмотрев «демку», увидел что по умолчанию не задан «Tab1» как активный таб. Все 3 неактивны и только после нажатия «Tab1» становиться активным, но информация по умолчанию показывает содержание «Tab1».

    Спасибо за внимание, если ошибка браузера то у меня Chrome)

    • driver says:

      Спасибо. Мой косяк))) Исправил и в демо, и в архиве с исходниками.

      firstchild.addClass('tabulous_active');

  2. Антон says:

    Добрый день.

    Если текст коротки, допустим, 2 слова и строкой ниже еще 2 слова и тд, то текст выравняется по средине только относительно самого себя, а не относительно страницы. Если ширина текста занимает от края до края (как в примере) то текст выравняется по средине страницы.

    Если не ясно выразился измените тест на:

    Всем Привет

    Как дела

    и попробуйте выравнять по средине относительно страницы.

    А так очень достойные табы, жду ответа.Спасибо.

    • driver says:

      День добрый.

      В принципе, даже не рассматривал использование табов для вывода такой краткой информации. А вообще, можете поэкспериментировать с параметрами в tabulous.js, позиционирование бока с контентом выполняется в строке

      alldivs.css({'position': 'absolute','top':'40px'});

  3. Piratborn says:

    <section id="Pages_Wind"> <!-- Первая --> <aside id="One"> <!-- Tab1Page1 --> <div id="tabs"> <ul> <li><a href="#tabs-1" title="">Оформление PG</a></li> <li><a href="#tabs-2" title="">Оформление Статьи</a></li> </ul> <div id="tabs_container"> <div id="tabs-1"> <!--содержание табов-->1 </div> <div id="tabs-2"> <!--содержание табов-->2 </div> </div> <!--Конец контейнера с содержанием табов--> </div> </aside> <!-- Вторая --> <aside id="Two" style="display: none;"> <div id="tabs"> <ul> <li><a href="#tabs-3" title="">3</a></li> <li><a href="#tabs-4" title="">4</a></li> </ul> <div id="tabs_container"> <div id="tabs-3"> <!--содержание табов-->3 </div> <div id="tabs-4"> <!--содержание табов-->4 </div> </div> <!--Конец контейнера с содержанием табов--> </div> <!--Конец контейнера с содержанием табов--> </div> </aside> <!-- Третья --> <aside id="Three" style="display: none;"> <p>Группа символов для объема 3...</p> </div> </aside> </section>

    При этом 2 страница отображается не правильно.

    В чем может быть проблема?

    joxi.ru/52aN9WBsGNEonA

    • driver says:

      Если на странице, вы используете несколько табов, то и идентификаторы у них должны быть уникальными, т.е. если у первого блока вкладок id="tabs", то у второго уже id="tabs2", и т.д...

      В исполняемом js.js прописываете id табов с понравившемся вам эффектом перехода. Например, если для первого блока вкладок вы выбрали эффект scale, а для второго slideLeft, код будет таким:

      $(document).ready(function($) { $('#tabs').tabulous({ effect: 'scale' }); $('#tabs2').tabulous({ effect: 'slideLeft' }); });

      По приведённому вами коду html, в редакторе набросал пример, предварительно исправив все ваши ошибки(лишние закрывающие теги и т.п.), смотрите и всё поймёте: Тынц →

  4. Сергей says:

    Табы имеют ряд косяков, которые в последней версии не исправлены.

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

    2. Если есть обычные ссылки в блоке табов или кнопки, то они не функционируют, или ссылки как невидимки смещаются на другие ссылки и получается хаос.

  5. Sergei says:

    Столкнулся с проблемой с ссылками как и в предыдущем посте, только мои ссылки не работают вообще. Подскажите, нашлось ли решение данной проблемы?

«12
Рейтинг@Mail.ru