Создания простых вкладок с помощью CSS3
Вкладки для сайта являются неотъемлемой частью, пожалуй, каждого сайта. Но на каждом блоге они выглядят по разному, и порой уже сложно придумать что то новое, по этому сегодня речь пойдет о создании красивых и в тоже время простых вкладок с помощью CSS3 и jQuery. Суть наших вкладок состоит в том, когда пользователь выбирает вкладку происходит плавная загрузка контента, а над активной вкладкой происходит анимация. Данные вкладки помогут организовать контент страницы таким образом, чтобы было и красиво, и информативно..
Данная система вкладок позволит сохранить пространство, и красиво структурировать информацию для посетителя привлекая к ярким вкладкам, вот как выглядит эта система вкладок:
Как всегда, нам необходимо создать элементы разметки HTML, которая будет иметь следующий вид:
1 2 3 4 5 6 7 8 9 |
<ul class="tabContainer"> <!-- Сгенерированные вкладки с помощью jQuery будут тут --> </ul> <div class="clear"></div> <div id="tabContent"> <div id="contentHolder"> <!-- Вырванный с помощью AJAX контент будет тут --> </div> </div> |
Разметка проста и не должна вызвать у вас трудностей, если вы хотите расширить количество вкладок, можно это сделать следующим образом, при этом так же поправить информацию в JavaScript’e:
1 2 3 4 5 6 |
<li> <a href="#" class="tab green">Новая вкладка <span class="left"></span> <span class="right"></span> </a> </li> |
Вот так будет выглядеть разметка для каждой вкладки. Она состоит из элемента li, который находится внутри неупорядоченного списка .tabContainer выше, и содержит ссылку с двумя span.
Теперь начинаем стилизацию с помощью CSS стилей:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.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 другими словами) вокруг вкладок.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
#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:
1 2 3 |
<link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript" src="script.js"></script> |
И так, jQuery будет выполнять некоторые функции, например при полной загрузке страницы $(document).ready() функция, которая предоставлена в качестве параметра, выполняется. Объект Tabs проходит несколько итераций (циклов) с помощью метода $.each() и несколько элементов LI создаются и прибавляются к .tabContainer <UL>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
$(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().
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
/* Кэшируем вкладки в переменную для лучшей производительности: */ 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 запросов, и многое другое.
Читайте также:
Опубликовал Cooper 17.08.2011 в 02:30, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете оставить комментарий или трэкбэк с вашего сайта. |