В сегодняшнем уроке мы создадим оригинальные вкладки с помощью jQuery.
Их оригинальность заключается в смене вкладок. Обычно это происходит в горизонтальном направлении. В нашем случае вкладки меняются по принципу игровых автоматов "однорукий бандит". Они плавно сменяются в вертикальном направлении.
HTML
<div id="slot-machine-tabs">
<ul class="tabs">
<li><a href="#one">Tab One</a></li>
<li><a href="#two">Tab Two</a></li>
<li><a href="#three">Tab Three</a></li>
</ul>
<div class="box-wrapper">
<div id="one" class="content-box">
<div class="col-one col">
<img src="images/evangeline.jpg" alt="" />
</div>
<div class="col-two col">
<h3>Kate</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="col-three col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<div id="two" class="content-box">
<div class="col-one col">
<img src="images/elizabeth.jpg" alt="" />
</div>
<div class="col-two col">
<h3>Juliet</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="col-three col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<div id="three" class="content-box">
<div class="col-one col">
<img src="images/sonya.jpg" alt="" />
</div>
<div class="col-two col">
<h3>Penelope</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="col-three col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</div> <!-- END Box Wrapper -->
</div> <!-- END Slot Machine Tabs -->
Важные моменты:
- все это обернуто отдельным div с значением ID. Если захотим переделать эти вкладки в плагин, тогда мы можем обращаться к этому ID. Данное ID полностью бесполезно для CSS. Это означает, что подобных вкладок у нас может быть неограниченное количество на странице.
- "navigation" (вкладки) находятся над ячейками с контентом. С отключенным CSS это все будет выглядеть как список навигации. Значения href этих сcылок ведут к определенным ID ячеек с информацией.
- Когда у нас много закрывающих тегов </div> в ряд, я люблю добавлять комментарии после, чтобы было понятнее что за что отвечает.
CSS
Вкладки будут такие же как любая другая горизонтальная навигация. Мы сделаем элементы списка инлайн и блок с якорями зафлоатим влево. Простые границы и фоны, специальное состояние для текущей вкладки "current" (нет границы и вдавлена вниз) - и у нас все готово!
.tabs { list-style: none; overflow: hidden; padding-left: 1px; }
.tabs li { display: inline; }
.tabs li a { display: block; float: left; padding: 4px 8px; color: black; border: 1px solid #ccc; background: #eee; margin: 0 0 0 -1px; }
.tabs li a.current { background: white; border-bottom: 0; position: relative; top: 2px; z-index: 2; }
Очень интересно здесь использована тень вокруг div #box-wrapper. C помощью него у нас получается эффект, как будто текущая вкладка находится над другими, а все другие находятся за ней.
.box-wrapper { -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; padding: 20px; background: white; border: 1px solid #ccc; margin: -1px 0 0 0; height: 210px; position: relative; }
.content-box { overflow: hidden; position: absolute; top: 20px; left: 20px; width: 658px; height: 230px; }
Обратите внимание, что мы также поднимаем ячейку на 1 пиксель с негативный top margin. Таким образом мы делаем, чтобы граница не текущей вкладки не выглядела как 2-пиксельная, а 1-пиксельной.
Другая важная особенность здесь это то, что у #box-wrapper overflow hidden и четко заданная высота. Колонки во всех ячейках с контентом, которые на данный момент не активны спрятаны с помощью выталкивания их значения top на 350 пикселей (значение, больше чем высота ячейки). Это выталкивает их полностью за пределы видимости и overflow hidden обеспечивает нам отсутствие скролла. JavaScript далее будет выполнять работу показа новых ячеек и прятанья старый при надобности.
Колонки:
.col { width: 30%; float: left; position: relative; top: 350px; }
.col-one, .col-two { margin-right: 3%; }
Обратите внимание, что мы применяем right margin первым двум колонкам.
jQuery
Плагина пока еще нет под все наши нужды. Весь код доступен в исходниках. Мы же затронем наиболее важные строки.
Сразу мы прописываем первой вкладке текущее состояние. Колонки с контентом в текущей ячейке получают позицию top = 0 (чтобы они были видимыми).
$(".tabs li:first-child a, .content-box:first").addClass("current");
$(".box-wrapper .current .col").css("top", 0);
Мы используем функцию delegate для событий при нажатиях на вкладки.
$("#slot-machine-tabs").delegate(".tabs a", "click", function() {
// stuff
}
Когда пользователь нажимает на ссылку смена вкладок происходит только, если текущая вкладка не имеет статус "current".
$el = $(this);
if ( (!$el.hasClass("current")) && ($(":animated").length == 0 ) ) {
// stuff
}
Для более красивого эффекта и подобия игровым автоматам я решил использовать разную скорость смены вкладок. Все скорости устанавливаются случайно для каждой анимации, но с интервалом не менее половины секунды.
speedOne = Math.floor(Math.random()*1000) + 500;
speedTwo = Math.floor(Math.random()*1000) + 500;
speedThree = Math.floor(Math.random()*1000) + 500;
Пользуйтесь на здоровье. Добавление новых слайдов не такое уж и легкое, как в других вкладках на нашем сайте, но все же эффект смены вкладок заслуживает внимания!