JQuery закладки tabs

Начинаем ряд обзоров по JQuery UI библиотеки JavaScript. jQuery библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с AJAX. Перед тем, как мы начнем рассматривать данный урок, хотел бы Вас также ознакомить с другими похожими материалами: JQuery закладки и JavaScript закладки. Возможно кому то данные скрипты понадобяться.

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

Начнем с закладок - tabs. Закладки предназначены для быстрого анимированного переключения между разделами, чтобы упростить процесс разбивки текста. В основу создания закладок лежит метод $( "#tabs" ).tabs();, у каждой имеется свой id, таким образом каждая новая закладка имеет свои определенные параметры и атрибуты.

Чтобы виджет работал, нужно подключить библиотеки и стили.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"> </script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"> </script>

Общий html код, который будет вставляться для трех типов закладок с разным позиционированием.

<div id="tabs">

<ul>
<li><a href="#tabs-1">Тема 1</a></li>
<li><a href="#tabs-2">Тема 2</a></li>
<li><a href="#tabs-3">Тема 3</a></li>
<li><a href="#tabs-4">Тема 4</a></li>
</ul>

<div id="tabs-1">
<p>
Текст для темы 1
</p>
</div>

<div id="tabs-2">
<p>
Текст для темы 2 
</p>
</div>

<div id="tabs-3">
<p> 
Текст для темы 3
</p>
</div>

<div id="tabs-4">
<p>
Текст для темы 4
</p>
</div>

</div>

1. Закладки сверху.

<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>

2. Закладки снизу.

<script>
$(function() {
$( "#tabs" ).tabs();
$( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
.removeClass( "ui-corner-all ui-corner-top" )
.addClass( "ui-corner-bottom" );
$( ".tabs-bottom .ui-tabs-nav" ).appendTo( ".tabs-bottom" );
});
</script>

Стили.

<style>
#tabs .tabs-spacer { float: left; height: 200px; }
.tabs-bottom .ui-tabs-nav { clear: left; padding: 0 .2em .2em .2em; }
.tabs-bottom .ui-tabs-nav li { top: auto; bottom: 0; margin: 0 .2em 1px 0; border-bottom: auto; border-top: 0; }
.tabs-bottom .ui-tabs-nav li.ui-tabs-active { margin-top: -1px; padding-top: 1px; }
</style>

3. Закладки слева.

<script>
$(function() {
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
});
</script>

Стили.

<style>
.ui-tabs-vertical { width: 57em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 13em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px
 !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; 
padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>

 Следующий урок будет на тему JQuery сортировка, думаю Вам она пригодится! Спасибо за внимание к данному уроку!