Создаём табы с tabulous.js

Сегодня мы познакомим вас с jQuery плагином, с помощью которого, вы сможете создать табы - tabulous.js.

Подключаем jQuery и tabulous.js перед закрытием тега head

Код
<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>


Создаём html структуру для самих табов:

Код
<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">
  <!--tab content-->
  </div>

  <div id="tabs-2">
  <!--tab content-->

  </div>

  <div id="tabs-3">
  <!--tab content-->
  </div>

  </div><!--End tabs container-->

</div><!--End tabs-->


Инициализация плагина

Всё что нужно сделать, запустить плагин после готовности документа.

Код
$(document).ready(function ($) {
  $('#tabs').tabulous({);
});/code]

Если хотите применить специальный эффект для текста, добавьте настройку.

[code]$('#tabs').tabulous({
  effect: 'scale'
});

  • FalleN

  • 2164

  • 1

  • 237

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!