Закладки в стиле Google Play на CSS3 и jQuery

Закладки - очень часто встречающийся элемент интерфейса веб приложений. Существует бесчисленное множество методов и стилей их реализации, но идея остается одной и той же: нажать на закладку и увидеть содержание без обновления страницы.

В данном уроке представлен очередной вариант закладок в стиле Google Play с использованием CSS3 и jQuery.

Разметка HTML

Разметка для реализации структуры страницы очень простая. Обратите внимание на схожесть атрибута name у ссылки и id у соответствующего блока. Функционирование закладок будет опираться на данный факт.

<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

Задача заключается в реализации функционала без использования изображений с применением минимума CSS3. В данном коде не используется никаких псевдо-элементов, только рамки.

#tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li {
  float: left;
  margin: 0 -15px 0 0;
}

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

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

Основная магия формируется здесь:

#tabs a {
  height: 0;
  line-height: 30px;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #3D3D3D;
}

 

jQuery

К закладке можно будет получить доступ через адрес URL, например,  mywebsite.com/tabs.html#tab2.

    function resetTabs(){
        $("#content div").hide(); //Скрываем содержание
        $("#tabs a").attr("id",""); //Сбрасываем id      
    }

    var myUrl = window.location.href; //Получаем URL
    var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // Для localhost/tabs.html#tab2 myUrlTab = #tab2     
    var myUrlTabName = myUrlTab.substring(0,4); // Для выше привденного примера myUrlTabName = #tab

    (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(); // Показываем содержание текущей закладки
            }
        });

        for (i = 1; i <= $("#tabs li").length; i++) {
          if (myUrlTab == myUrlTabName + i) {
              resetTabs();
              $("a[name='"+myUrlTab+"']").attr("id","current"); // Активируем закладку по url
              $(myUrlTab).fadeIn(); // Показываем содержание закладки
          }
        }
    })()

 

Заключение

Данная техника имеет небольшой недостаток - закладки не работают так, как должно в IE6. Если вам требуется поддержка такого старого браузера, то нужно будет использовать специальные приёмы. Есть смысл прилагать усилия?

 


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/FGVjtFY4LX4/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Закладки в стиле Google Play на CSS3 и jQuery | | 2012-06-19 11:57:44 | | Статьи Web-мастеру | | Закладки - очень часто встречающийся элемент интерфейса веб приложений. Существует бесчисленное множество методов и стилей их реализации, но идея остается одной и той же: нажать на закладку и увидеть | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: