Создания простых вкладок с помощью CSS3

Вкладки для сайта являются неотъемлемой частью, пожалуй, каждого сайта. Но на каждом блоге они выглядят по разному, и порой уже сложно придумать что то новое, по этому сегодня речь пойдет о создании красивых и в тоже время простых вкладок с помощью CSS3 и jQuery. Суть наших вкладок состоит в том, когда пользователь выбирает вкладку происходит плавная загрузка контента, а над активной вкладкой происходит анимация. Данные вкладки помогут организовать контент страницы таким образом, чтобы было и красиво, и информативно..

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Данная система вкладок позволит сохранить пространство, и красиво структурировать информацию для посетителя привлекая к ярким вкладкам, вот как выглядит эта система вкладок:

Как всегда, нам необходимо создать элементы разметки HTML, которая будет иметь следующий вид:

</ul>

</div>

Разметка проста и не должна вызвать у вас трудностей, если вы хотите расширить количество вкладок, можно это сделать следующим образом, при этом так же поправить информацию в JavaScript’e:

<li>

<a href="#" class="tab green">Новая вкладка

</a>

</li>

Вот так будет выглядеть разметка для каждой вкладки. Она состоит из элемента li, который находится внутри неупорядоченного списка .tabContainer выше, и содержит ссылку с двумя span.

Теперь начинаем стилизацию с помощью CSS стилей:

.tabContainer{

float:right;

padding-right:13px;

}

#contentHolder{

background-color:#EEEEEE;

border:2px solid #FFFFFF;

height:300px;

margin:20px;

color:#444444;

padding:15px;

}

#tabContent{

background-color:#333;

border:1px solid #444;

margin-top:-15px;

width:100%;

}

#tabContent, .tabContainer li a,#contentHolder{

-webkit-box-shadow:0 0 2px black;

-moz-box-shadow:0 0 2px black;

box-shadow:0 0 2px black;

}

.tabContainer li{

/* Все элементы LI выстрояться друг за другом */

display:inline;

}

.tabContainer li a,.tabContainer li a:visited{

/* Ссылки вкладок превращаются в красочные кнопки */

float:left;

font-size:18px;

display:block;

padding:7px 16px 1px;

margin:4px 5px;

height:29px;

/* Позиционируем */

position:relative;

/* CSS3 текстовые тени */

text-shadow:1px 1px 1px #CCCCCC;

}

Приведенный код использует свойство box-shadow, которое добавляет тени под вкладками (#tabContent div и #contentHolder). Затем свойство text-shadow, которое отвечает за цветную тень (outer glow другими словами) вокруг вкладок.

#overLine{

/* Линия над активной кнопкой. */

position:absolute;

height:1px;

background-color:white;

width:90px;

float:left;

left:1px;

top:-5px;

overflow:hidden;

}

#main{

margin:0 auto;

position:relative;

width:700px;

}

ul .left{

/* Левый span в ссылке */

height:37px;

left:0;

position:absolute;

top:0;

width:10px;

}

ul .right{

/* Правый span в ссылке */

height:37px;

right:0;

position:absolute;

top:0;

width:10px;

}

/* Придаем стиль индивидуально для каждого цвета: */

ul a.green{background:url(img/green_mid.png) repeat-x top center; color:#7f0900;}

ul a.green span.left{ background:url(img/green_left.png) no-repeat left top;}

ul a.green span.right{ background:url(img/green_right.png) no-repeat right top;}

ul a.blue{background:url(img/blue_mid.png) repeat-x top center; color:#487a00;}

ul a.blue span.left{ background:url(img/blue_left.png) no-repeat left top;}

ul a.blue span.right{ background:url(img/blue_right.png) no-repeat right top;}

ul a.orange{background:url(img/orange_mid.png) repeat-x top center;color:#828600;}

ul a.orange span.left{ background:url(img/orange_left.png) no-repeat left top;}

ul a.orange span.right{ background:url(img/orange_right.png) no-repeat right top;}

ul a.red{background:url(img/red_mid.png) repeat-x top center; color:#46006a;}

ul a.red span.left{ background:url(img/red_left.png) no-repeat left top;}

ul a.red span.right{ background:url(img/red_right.png) no-repeat right top;}

/* Состояние при наведении мышки: */

ul a:hover{background-position:bottom center; text-decoration:none;}

ul a:hover span.left{ background-position:left bottom;}

ul a:hover span.right{ background-position:right bottom;}

.preloader{

display:block;

margin:120px auto;

}

Затем подключаем библиотеки jQuery, их необходимо вставить между тегами head /head:

И так, jQuery будет выполнять некоторые функции, например при полной загрузке страницы $(document).ready() функция, которая предоставлена в качестве параметра, выполняется. Объект Tabs проходит несколько итераций (циклов) с помощью метода $.each() и несколько элементов LI создаются и прибавляются к .tabContainer <UL>

$(document).ready(function(){

/* Код выполняется после загрузки страницы */

/* Определяем массив с вкладками и соответствующими AJAX страницами:

var Tabs = {

'GENERAL' : 'pages/page1.html',

'NEWS' : 'pages/page2.html',

'TEMPLATES' : 'pages/page3.html',

'ABOUT US' : 'pages/page4.html'

}

/* Доступные цвета для вкладок: */

var colors = ['blue','green','red','orange'];

/* Цвета линии над вкладками (активными): */

var topLineColor = {

blue:'#72be06',

green:'#d30f00',

red:'#8900d0',

orange:'#d0d800'

}

/* Цикл: */

var z=0;

$.each(Tabs,function(i,j){

var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');

/* Указываем информацию о странице по каждой ссылке: */

tmp.find('a').data('page',j);

/* Добавляем вкладку к контейнеру UL: */

$('ul.tabContainer').append(tmp);

})

Внимательно рассмотрев код выше, можно легко добавлять новые вкладки, и изменить некоторую цветовую гамму. Здесь мы создадим новый элемент div и передадим объект с ID и CCSS свойствами вместо определения их по отдельности с помощью методов .attr() и .css().

/* Кэшируем вкладки в переменную для лучшей производительности: */

var the_tabs = $('.tab');

the_tabs.click(function(e){

/* "this" указывает на нажатую ссылку вкладки: */

var element = $(this);

/* Если активно, вернуть false и выйти: */

if(element.find('#overLine').length) return false;

/* Определяем цвет вкладки: */

var bg = element.attr('class').replace('tab ','');

/* Убираем линию: */

$('#overLine').remove();

/* Создаем новый элемент div с помощью jQuery 1.4 передавая дополнительный параметр объекта: */ $('<div>',{

id:'overLine',

css:{

display:'none',

width:element.outerWidth()-2,

background:topLineColor[bg] || 'white'

}}).appendTo(element).fadeIn('slow');

/* Проверяем была ли кэширована страница вырванная AJAX: */

if(!element.data('cache'))

{

/* Если кэша нет, показать gif анимацию загрузки и выполнить AJAX запрос: */

$('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');

$.get(element.data('page'),function(msg){

$('#contentHolder').html(msg);

/* После получения страницы, добавить в кеш для текущей ссылки: */

element.data('cache',msg);

});}

else $('#contentHolder').html(element.data('cache'));

e.preventDefault(); })

/* Эмулируем нажатие на первую вкладку, чтобы область с контентом не была пустой: */

the_tabs.eq(0).click();

});

Следует обратить внимание на некоторые детали, метод использования data() по всему коду. Он присваивает информацию элементу вызывая метод с 2-мя параметрами $(‘#selector’).data(‘label’,”String Data”). Это присваивает строку “String Data” элементу и мы можем позже к ней обратиться (или проверить) вызывая метод без второго параметра.

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

На главную