Всем привет. В этом материале я покажу, как создать красивые табы на JQuery с помощью небольшого плагина.
Всем привет. В этом материале я покажу, как создать красивые табы на JQuery с помощью небольшого плагина.
Итак, для начала зайдите по ссылке: https://github.com/aarondo/tabulous.js И скачайте ZIP архив. Там вы найдете необходимые стили и скрипты, которые, кстати, давайте подключим в нашем html файле
<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>
</head>
В самом же документе нужно создать структуру следующего вида:
<div id="tabs">
<ul>
<li><a href="#tabs-1" title="">Первый таб</a></li>
<li><a href="#tabs-2" title="">Второй таб</a></li>
<li><a href="#tabs-3" title="">Третий таб</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, officiis, hic, optio, quis provident fugiat modi vero suscipit tenetur deleniti dolor dignissimos illo exercitationem quidem ratione nobis voluptatem expedita quos.</p>
</div>
<div id="tabs-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, officiis, hic, optio, quis provident fugiat modi vero suscipit tenetur deleniti dolor dignissimos illo exercitationem quidem ratione nobis voluptatem expedita quos.</p>
</div>
<div id="tabs-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, officiis, hic, optio, quis provident fugiat modi vero suscipit tenetur deleniti dolor dignissimos illo exercitationem quidem ratione nobis voluptatem expedita quos.</p>
</div>
</div>
</div>
Думаю, разобраться в структуре вам не составит труда. У нас есть ссылки, которые ссылаются на идентификатор какого-то отдельного таба, где внутри мы можем писать что угодно. Чтобы добавить новый таб, добавьте div с id и ссылку, которая будет ссылаться на этот идентификатор.
Теперь нам осталось добавить скрипт:
<script>
$(document).ready(function ($) {
$('#tabs').tabulous({
effect: 'slideLeft'
});
});
</script>
Здесь мы просто отбираем div с id=tab и вызываем для него метод tabulous, куда передаем объект, который может принимать всего один параметр - эффект. Значения могут быть следующие: scale, slideLeft, scaleUp и flip. Вы можете поэксперементировать и посмотреть, какой эффект вам нравится больше.
Итак, на этом все. Надеюсь, что данная вещь будет кому-нибудь полезна. Пока.
