Создаем эффектные вкладки (табы) для сайта
Дабы восполнить нарисовавшийся пробел, замутил свою, более лёгкую и стабильную версию плагина для создания вкладок (табов) Dm-tabs.js
Растет армия пользователей использующих для серфинга в интернете различные мобильные устройства: iPhone, iPad, мобильные телефоны и т.д и т.п. Все эти современные гаджеты имеют разные разрешения и возможности экранов, а значит перед разработчиками веб-сайтов еще острее встает вопрос юзабилити, т.е. логичность и простота в расположении элементов управления пользовательских интерфейсов, а так же организация более компактной подачи информации. Одним из популярных способов экономии места на страницах сайтов является использование вкладок (tabs). Вкладки незаменимы в ситуациях когда на одной странице или в боковой панели сайта необходимо разместить объемную информацию, используя при этом, как можно меньшее пространство. В купе с общим адаптивным дизайном, такие способы вывода контента становятся все более популярными среди веб-дизайнеров и разработчиков.
Плагинов для вкладок написано огромное количество, все они разные и по исполнению и по функциональным возможностям, при желании вы всегда сможете найти именно то что вам нужно. Меня же больше заинтересовали различные эффекты используемые при переключении вкладок и появлении блоков с содержанием.
Сегодня мне хотелось бы рассказать и показать на примере, как с помощью простого jQuery плагина работающего в связке с 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