Google Play вкладки на jQuery и CSS3

Здравствуйте, уважаемые читатели XoZbloga! Вкладки на странице позволяют намного лучше структурировать информацию. Поэтому создание вкладок достаточно широко используемый прием для дополнительной навигации. А если еще и достойно реализовать такой элемент юзабилити, то это вдвойне хорошо. Есть так много способов, так много вариантов создания вкладок, но цель создания у всех одна: щелкнуть на вкладку и увидеть ее содержимое без обновления страницы.

В этом уроке Вы узнаете, как можно создать вкладки с дизайном от Google Play.

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;
    }

Вот так вот выглядят создаваемые вкладки.

Вкладки как в магазине Google Play

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 и ниже 🙂

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!