Создание легкого блока с вкладками на jQuery

Дата: 14 Декабря 2013, в 21:11
Рубрика: Вебмастерская
Просмотры: 2022

Очень долго искал оптимальных и удобных способов реализации вкладок. После долгих поисков все таки был найден очень легкий способ реализации блока с вкладками.

Представляю вам мини-плагин для jQuery - TTabs. Весом всего в 1кб он способен создать сколько угодно вкладок на странице.

Все, что вам нужно, чтобы создать на своем сайте вкладки - это наличие библиотеки jQuery и вот этого маленького плагина:

jQuery.fn.ttabs = function(options){
var options = jQuery.extend({
activeClass: 'active-ttab' // Класс активной вкладки
},options);
return this.each(function() {
$(this).find('.tt-panel:first').show(0);
$(this).find('.index-tabs span:first').addClass(options.activeClass);
$(this).find('.index-tabs span').click(
function() {
$(this).parent().parent().find('.index-panel .tt-panel').hide(0);
var numEl= $(this).index();
$(this).parent().parent().find('.index-panel .tt-panel').eq(numEl).show();
$(this).parent().find('span').removeClass(options.activeClass);
$(this).addClass(options.activeClass);
}
);
});
};

Сохраняем плагин в файл ttabs.js и подключаем его добавлением кода в секцию head:

<script type="text/javascript" src="ttabs.js"></script>

Создаем html код для вкладок:

<div class="tt-tabs">
<div class="index-tabs">
<span>Первая вкладка</span>
<span>Вторая вкладка</span>
<span>Третья вкладка</span>
</div>
<div class="index-panel">
<div class="tt-panel">
Содержание первой вкладки
</div>
<div class="tt-panel">
Содержание второй вкладки
</div>
<div class="tt-panel">
Содержание третьей вкладки
</div>
</div>
</div>

Ну и теперь активируем наш плагин и применяем его:

<script type="text/javascript">
$(document).ready(function() {
$('.tt-tabs').ttabs();
});
</script>

Чтобы создать несколько блоков с вкладками, мы просто дублируем html код и меняем название класса (class) у блока, в котором содержаться вкладки:

<script type="text/javascript">
$(document).ready(function() {
$('.tt-tabs').ttabs();
$('.tt-tabs2').ttabs();
});
</script>

Плагин имеет одну настройку - вы можете указать название класса активной вкладки:

<script type="text/javascript">
$(document).ready(function() {
$('.tt-tabs').ttabs({
activeClass: 'active-ttab2'
});
});
</script>

Что бы красиво оформить блок с вкладками используем минимум настроек. Не надо громоздких стилей которые очень долго загружаются.

.index-tabs span {
float:left;
color:#808080;
border:1px solid #dacec5;
border-bottom:0;
background:#f9f9f9;
padding:10px 15px 10px 15px;
margin:0 2px 0 0;
cursor:pointer;
}
.tt-panel {
display:none;
width:450px;
color:#3a1821;
border:1px solid #dacec5;
border-top:0;
background:#e6e2d2;
padding:10px;
clear:both;
}
.active-ttab {
color:#000 !important;
background:#e1e1e1 !important;
}
.active-ttab2 {
color:#83390d !important;
background:#e6e2d2 !important;
}

И напоследок сохраним наши стили в файле style.css и так же подключим его как и плагин:

<link rel="stylesheet" href="style.css" type="text/css" />

Вот рабочий пример, в котором задействован блок с вкладками. Стиль выбранной вкладки определяется с помощью класса active-ttab2