Tabulous - плагин вкладок, табов

Tabulous - представляет собой плагин для реализации у себя на сайте блока с вкладками с различными эффектами переключения самих вкладок.

HTML

Разметка типичная для табов, и довольно простая.

 

<div id="tabs">
<ul>
<li><a href="#tabs-1" title="">Вкладка 1</a></li>
<li><a href="#tabs-2" title="">Вкладка 2</a></li>
<li><a href="#tabs-3" title="">Вкладка 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p> 
Третий день с неба течет вода,<br>
Очень много течет воды.
</p>
</div>
<div id="tabs-2">
<p>
Знаешь, каждую ночь<br>
Я вижу во сне море.
</p>
</div>
<div id="tabs-3">
<p>
Мы приходим домой к себе,<br>
Люди ходят из дома в дом,
</p>
</div>
</div>
</div>

 

Подключаем необходимые файлы:

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

 

Инициализируем плагин:

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

Доступные опции:

  • effect - По умолчанию scale, это эффект переключения вкладок, доступны значения: scale / slideLeft / scaleUp / flip

СКАЧАТЬСкачек: 545
7,54 Kb
Кто скачал?

ДЕМОПосмотреть
пример
CSS3 + jQuery
  • Перевод: Игорь
bower install tabulous