Здравствуйте, уважаемые читатели XoZbloga! Вкладки на странице позволяют намного лучше структурировать информацию. Поэтому создание вкладок достаточно широко используемый прием для дополнительной навигации. А если еще и достойно реализовать такой элемент юзабилити, то это вдвойне хорошо. Есть так много способов, так много вариантов создания вкладок, но цель создания у всех одна: щелкнуть на вкладку и увидеть ее содержимое без обновления страницы.
В этом уроке Вы узнаете, как можно создать вкладки с дизайном от Google Play.
Разметка HTML
Как всегда, начнем с описания гипертекстовой разметки создаваемых вкладок. Сами вкладки организованы в виде маркированного списка. Атрибут ссылки name используется для определения якоря внутри страницы, и совпадает с id связных блоков контента.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <ul id="tabs"> <li><a href="#" name="#tab1">Первая</a></li> <li><a href="#" name="#tab2">Вторая</a></li> <li><a href="#" name="#tab3">Третья</a></li> <li><a href="#" name="#tab4">Последняя</a></li> </ul> <div id="content"> <div id="tab1">...</div> <div id="tab2">...</div> <div id="tab3">...</div> <div id="tab4">...</div> </div> |
Стили CSS
Цель как всегда одна, сделать красиво, желательно без использования изображений и с минимальным кодом CSS насколько это возможно.
1 2 3 4 5 6 7 8 9 10 11 12 | #tabs { overflow: hidden; width: 100%; margin: 0; padding: 0; list-style: none; } #tabs li { float: left; margin: 0 -15px 0 0; } |
Здесь все просто прописываем основные правила для вкладок, ширина на 100% но стоить заметить что в демо версии ширина тела страницы всего 700px. Так что куда бы вкладки не были встроены, они будут подгоняться под всю ширину. Отображаться будет только область внутри элемента, остальное будет скрыто — свойство overflow: hidden;
Также можно видеть, что для элемента списка отступ справа отрицательный: margin: 0 -15px 0 0; Это сделано для того, чтобы вкладки как-бы накладывались друг на друга.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #tabs a { float: left; position: relative; padding: 0 40px; height: 0; line-height: 30px; text-transform: uppercase; text-decoration: none; color: #fff; border-right: 30px solid transparent; border-bottom: 30px solid #3D3D3D; border-bottom-color: #777\9; opacity: .3; filter: alpha(opacity=30); } |
Вот стили непосредственно для ссылки внутри элемента списка. Благодаря text-transform: uppercase; все символы текста становятся прописными. Также хочется отметить, что высота элемента нулевая, однако граница снизу border-bottom равна 30px и межстрочный интервал line-height 30px, что позволяется тексту оставаться по центру. А уже граница справа border-right в 30px и с прозрачным фоном создает эффект среза. Также для всего элемента ссылки задается легкая прозрачность фона в 30%.
Чтобы стало более понятней, как создается эффект среза я подготовил картинку. Где блок div с похожими стилями, что и у нас только правая граница синяя, и есть высота и ширина в 100px.
Ну а здесь описываются стили, применяемые при наведении на вкладку и для активной вкладки #current.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | #tabs a:hover, #tabs a:focus { border-bottom-color: #2ac7e1; opacity: 1; filter: alpha(opacity=100); } #tabs a:focus { outline: 0; } #tabs #current { z-index: 3; border-bottom-color: #3d3d3d; opacity: 1; filter: alpha(opacity=100); } |
В следующем фрагменте стилей, исписываются правила для оформления области с текстом.
1 2 3 4 5 6 7 8 9 10 11 | #content { background: #fff; border-top: 2px solid #3d3d3d; padding: 2em; height: 220px; } #content h2, #content h3, #content p { margin: 0 0 15px 0; } |
Вот так вот выглядят создаваемые вкладки.
jQuery
Теперь пару слов о jQuery коде. Есть возможность получить доступ к вкладкам непосредственно по URL, например, my-site/index.html#tab2. То есть можно использовать 2 варианта с проверкой по адресной строке и без.
1 вариант (простой):
Здесь все просто. Отслеживаем клик по вкладке, после придаем ей стиль активной вкладки и открываем ее контент. Но если обновить страницу то активная вкладка слетает на первую.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | (function(){ $("#content div").hide(); // Первоначально скрываем весь контент $("#tabs li:first a").attr("id","current"); // Активной делается первая вкладка $("#content div:first").fadeIn(); // И показывается текст первой вкладки $("#tabs a").on("click",function(e) { // клик на вкладку e.preventDefault(); if ($(this).attr("id") == "current"){ //проверяем активна ли сейчас вкладка return // если да, то ничего не происходит } else{ resetTabs(); $(this).attr("id","current"); // иначе делаем вкладку активной $($(this).attr('name')).fadeIn(); // показываем контент активной вкладки } }); })() |
2 вариант (с проверкой URL):
Теперь после обновления страницы вкладка остается активной. Если использовать данный вариант, то ссылки вкладок надо заменить с # на index.html#tab1 или #tab1. То есть разметка вкладок будет выглядеть так.
1 2 3 4 5 6 | <ul id="tabs"> <li><a href="index.html#tab1" name="#tab1">Первая</a></li> <li><a href="index.html#tab2" name="#tab2">Вторая</a></li> <li><a href="index.html#tab3" name="#tab3">Третья</a></li> <li><a href="index.html#tab4" name="#tab4">Последняя</a></li> </ul> |
В этом фрагменте мы объявляем переменные, которые понадобятся дальше. А также функцию resetTabs().
1 2 3 4 5 6 7 8 | function resetTabs(){ $("#content div").hide(); //Скрываем весь текст $("#tabs a").attr("id",""); //Сбрасываем id's } var myUrl = window.location.href; //в переменную записывается URL var myUrlTab = myUrl.substring(myUrl.indexOf("#")); //из предыдущей переменной вытаскиваем якорь... для локальной машины my-site/index.html#tab2, myUrlTab = #tab2 var myUrlTabName = myUrlTab.substring(0,4); // myUrlTabName = #tab |
А теперь основной код. Происходит тоже самое, что и в предыдущем варианте. отслеживаем клик придаем стиль активной вкладке, но также и проверяем URL после обновления страницы. То есть после обновления страницы откроется вкладка выбранная ранее, а не первая как в предыдущем примере. Код похожий только убирается e.preventDefault();.
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 | (function(){ $("#content div").hide(); // Первоначально скрываем весь контент $("#tabs li:first a").attr("id","current"); // Активной делается первая вкладка $("#content div:first").fadeIn(); // И показывается текст первой вкладки $("#tabs a").on("click",function(e) { // клик на вкладку if ($(this).attr("id") == "current"){ //проверяем активна ли сейчас вкладка return // если да, то ничего не происходит } else{ resetTabs(); $(this).attr("id","current"); // иначе делаем вкладку активной $($(this).attr('name')).fadeIn(); // показываем контент активной вкладки } }); // проверка по URL for (i = 1; i <= $("#tabs li").length; i++) { if (myUrlTab == myUrlTabName + i) { resetTabs(); $("a[name='"+myUrlTab+"']").attr("id","current"); // Активируем вкладку по URL $(myUrlTab).fadeIn(); // показываем контент } } })() |
Заключение
На этом все. Данные вкладки работают во всех браузерах, кроме IE 6 и ниже 🙂
Источник статьи/урока: https://xozblog.ru
По материалам: http://www.red-team-design.com/google-play-minimal-tabs-with-css3-jquery