Как создать вкладки при помощи CSS и jQuery плагина Tabify


Сегодня хочу рассказать о небольшом jQuery скрипте, который позволяет быстро и легко создавать на страницах простые вкладки. Сам скрипт называется Tabify. Вы можете скачать последнюю его версию на сайтеавтора. Чтобы создать на вашей странице вкладки, достаточно просто подключить библиотеку jQuery и скрипт Tabify. Оформление вкладок, как всегда будем описывать правилами CSS.

Jquery плагин Tabify позволяет вам легко создавать вкладки с любым содержанием. Все, что вам нужно, это создать немаркированный список для заголовков вкладок и пару связанных div контейнеров. Основное различие между конкурентами и Tabify, является его малый размер.

Как это выглядит

Как видите, очень неплохой результат, полученный без применения графики.

как создать вкладки при помощи CSS и jQuery плагина Tabify
как создать вкладки при помощи CSS и jQuery плагина Tabify

Как использовать Tabify

Я как обычно приведу код из полностью рабочего примера, со структурой и стилями. Стили вы можете подобрать сами исходя из вашего оформления. Итак, для начала разметка блока, содержащего вкладки.

<div id="tabs"><!-- вкладки -->
<ul>
<li class="active"><a href="#pane1">Вкладка 1</a></li>
<li><a href="#pane2">Вкладка 2</a></li>
<li><a href="#pane3">Вкладка 3</a></li>
</ul>
<div id="panes"><!-- контейнер для панелей -->
<!-- панель для вкладки 1 -->
<div id="pane1" class="tab">
<p>Текст вкладки 1 ...</p>
</div>
<!-- панель для вкладки 2 -->
<div id="pane2" class="tab">
<p>Текст вкладки 2 ...</p>
</div>
<!-- панель для вкладки 3 -->
<div id="pane3" class="tab">
<p>Текст вкладки 3 ...</p>
</div>
</div><!-- контейнер для панелей -->
</div><!-- вкладки -->

Обратите внимание на начальную вкладку, которая обозначена слассом class="active". Скрипт jQuery будет в дальнейшем переназначать этот красс на вкладку, по который был клик мышки.

Эта структура будет работать сразу, после подключения скрипта. Давайте подключим скрипты, которые нам необходимы.

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tabify.js"></script>

После этого, мы просто вызываем функцию управления вкладками для нашего тега <div id="tabs">.

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

Как видите все предельно просто, и мы получаем работающий функционал при минимальном объеме подгружаемых скриптов

/* общий конейнер с вкладками */
#tabs{
display:block;
margin-top:20px;
clear:both;
}
/* немаркированный список заголовка */
#tabs ul{
display:block;
height:auto;
margin:0;
padding:0;
margin-top:10px;
font-size: 12px;
list-style:none;
}
/* элемент списка */
#tabs ul li {
margin:0;
padding:0;
float:left;
}
/* ссылка заголовка вкладки */
#tabs ul li a {
display:block;
margin:0;
margin-right:2px;
padding:10px 15px;
float:left;
color: #ddd;
background-color:#56585d;
text-decoration:none;
/* стили CSS3 для закругления уголков */
		 -webkit-border-top-left-radius: 8px; /* Safari, Chrome */
		-webkit-border-top-right-radius: 8px; /* Safari, Chrome */
		 -khtml-border-top-left-radius: 8px; /* KHTML */
		 -khtml-border-top-right-radius: 8px; /* KHTML */
			 -moz-border-radius-topleft: 8px; /* Firefox */
			-moz-border-radius-topright: 8px; /* Firefox */
				 border-top-left-radius: 8px; /* CSS3 */
				border-top-right-radius: 8px; /* CSS3 */ 

}
/* наведение мышки на вкладку */
#tabs ul li a:hover {
color:#FFF;
background-color:#121518;
text-decoration:none;
}
/* активная вкладка */
#tabs ul .active a,
#tabs ul .active a:hover {
font-weight:bold;
color:#121518;
background-color:#e5e5e5;
text-decoration:none;
border:none;
border-bottom:2px solid #e5e5e5;
-webkit-text-shadow: 0px 1px 1px #fff;
-moz-text-shadow: 0px 1px 1px #fff;
text-shadow: 0px 1px 1px #fff;

}
/* контейнер с панелями вкладок */
#tabs #panes {
margin:0;
padding:0;
clear:both;
display:block;
background-color:#e5e5e5;
/* стили CSS3 для закругления уголков */
-webkit-border-radius: 8px; /* Safari, Chrome */
-webkit-border-top-left-radius: 0px; /* Safari, Chrome */
-moz-border-radius: 8px; /* Firefox */
-moz-border-radius-topleft: 0px; /* Firefox */
border-radius: 8px; /* CSS3 */
border-top-left-radius: 0px; /* CSS3 */
}
/* оформление вкладок */
#tabs #panes .tab {
margin:0;
display:block;
padding:20px;
clear:both;	
}

После этого получаем красивые рабочие вкладки, созданные при помощи CSS и jQuery

 

демонстрация

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

Один отзыв

  1. антонина20/01/2013

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

16 − девять =