Zakładki (taby)
W poniższym przykładzie postaramy się zbudować semantyczne taby. Zastosujemy do tego celu jquery. Następnie to samo zrobimy korzystając z czystego Javascript.
Aby nasze taby były semantyczne i dostępne dla wszystkich, powinny być niezależne od samego kodu. Jeżeli przeglądarka użytkownika nie obsługuj skryptów, powinien on i tak mieć dostęp do treści zawartej w tabach.
Najłatwiej zrobić to poprzez umieszczenie w dokumencie linków kotwic. Nasze taby to zwykła lista linków, więc tak ją powinniśmy napisać:
<ul class="tabs"> <li class="active"><a href="#tab-1" class="active">Zakładka 1</a></li> <li><a href="#tab-2">Zakładka 2</a></li> <li><a href="#tab-3">Zakładka 3</a></li> </ul> <div id="tab-1" class="tab"> ...Treść pierwszej zakładki </div> <div id="tab-2" class="tab"> ...Treść drugiej zakładki </div> <div id="tab-3" class="tab"> ...Treść trzeciej zakładki </div>
Jeżeli użytkownik wyłączy skrypty, wówczas dalej będzie mógł korzystać z linków które przenosić go będą w odpowiednie miejsca na stronie. Zasada naszego działania jest bardzo prosta:
- pobieramy linki z tabami,
- pobieramy atrybut href każdego linka i ukrywamy treść do której każdy z tych linków prowadzi
- wybranemu linkowi-tabowi ustawiamy aktywną klasę
- pobieramy atrybut href wybranego taba-linka i pokazujemy jego treść
Włączamy więc nasze szybkostrzelne działko
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
i zaczynamy strzelać do wroga:
$(document).ready(function() {
//dla każdego miejsca z tabami
$('.tabs').each(function() {
var $ul = $(this);
var $li = $ul.children('li');
//przy wejsciu na strone ukrywamy tresc tabow i pokazujemy tylko aktywny...
$li.each(function() { //pętla po wszystkich tabach
var $trescTaba = $($(this).children('a').attr('href')); //pobieramy blok o id pobranym z linka-taba
if ($(this).hasClass('active')) { //jeżeli ten tab ma klasę aktywną
$trescTaba.show(); //to pobrany przed chwilą blok pokazujemy
} else {
$trescTaba.hide(); //jeżeli takiej klasy nie ma to blok ukrywamy
}
});
//mały trik - gdy klikamy na tab, wtedy wykonujemy zdarzenie dla linka, który się w nim znajduje (dzieki temu możemy kliknąć na cały tab, a nie tylko na linka)
$li.click(function() {$(this).children('a').click()});
//po kliknięciu na link...
$li.children('a').click(function() {
//usuwamy z tabów klasę active
$li.removeClass('active');
//ukrywamy wszystkie taby
$li.each(function() {
$($(this).children('a').attr('href')).hide();
});
//ustawiamy klikniętemu tabowi klasę aktywną
$(this).parent().addClass('active');
$($(this).attr('href')).show();
//nie chcemy wykonać domyślnej akcji dla linka
return false;
});
});
});
Po takiej serii żaden przeciwnik nie przeżyje.
Powyższy kod mimo, że nieco przydługi, jest bardzo prosty. Po kolei wykonaliśmy wypunktowanie wcześniej czynności.
Wyłączanie tabów
Nasze taby mają już podstawową funkcjonalność. Postaramy się teraz je nieco upiększyć i wzbogacić ich funkcjonalność. Na początek dodajmy obsługę nie aktywnych tabów. Wystarczy, że linkom-tamob, które mają być nieaktywne dodamy dodatkową klasę disable (lub jeszcze lepiej ustawimy im atrybut "disabled"), a następnie dokonamy odpowiedniego sprawdzenia:
if (!$(this).parent().hasClass('disable')) {
//usuwamy z tabów klasę active
$li.removeClass('active');
//ustawiamy klikniętemu tabowi dodatkową klasę
$(this).parent().addClass('active');
$tabsPlace.children('.tab').hide();
//pokazujemy treść aktywnego taba - jego id pobieramy z href klikniętego linka
$tabsPlace.children('#'+$(this).attr('href')).show();
} else {
$(this).blur();
}
Jeżeli kliknięty tab ma ustawioną klasę "disable", wówczas nie robimy nic szczególnego poza zdjęciem z niego focusa (w zasadzie jest to niepotrzebny bajer).
Upiększanie tabów
Zajmijmy się teraz upiększeniem naszych tabów. Teoretycznie wszystko powinniśmy zrobić za pomocą stylów. CSS3 wprowadza nowe stylowanie takie np jak dodawanie zaokrąglenia blokom. Wystarczy, że użyjemy deklaracji
#tabs li {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
}
aby uzyskać bardzo ładne okrągłe rogi. Osobiście preferuję właśnie ten sposób. Jeżeli ktoś używa przeglądarki, która obsługuje takie stylowanie - to bardzo dobrze. Plus dla niego - damy mu za to lepszy wygląd tabów. Jeżeli jednak ktoś używa przeglądarki nie obsługującej takiego stylowania - na funkcjonalności nic nie straci, jedynie wygląd trochę ucierpi.
Nie zawsze jednak zda to egzamin. Mało rozumny szef zlecający nam zrobienie swojej upragnionej strony zazwyczaj nie zrozumie czemu "u niego na IE jest brzydko".
Po drugie czasami chcemy użyć dla naszych tabów tła, którego nie da się uzyskać bez użycia grafiki. Dla nas - super webmajstrów to żaden problem.
Nasz tab podzielimy na 2 części - lewą i prawą. Lewa zawierać będzie lewy bok wraz z tłem taba, a prawa prawy bok. Aby zrobić lewe górne zaokrąglenie dla naszych tabów, wystarczy zastosować tło, które zawiera lewy górny róg zaokrąglony. Aby taby mogły przyjmować różne szerokości, nasze tło powinno być odpowiednio szerokie.
Pozostaje nam zrobienie drugiego narożnika - prawego górnego.
Teraz wystarczy tylko do naszego taba wstawić za pomocą JS odpowiednio ostylowany span, dla którego użyjemy odpowiedniej grafiki.
var $li = $ul.children('li');
$li.each(function() {
$(this).append('<span class="right"></span>')
});
//lub podpiąć pod skrypt, który napisaliśmy na początku
$li.each(function() {
var $trescTaba = $($(this).children('a').attr('href'));
if ($(this).hasClass('active')) {
$trescTaba.show();
} else {
$trescTaba.hide();
}
$(this).append('<span class="right"></span>');
});
Naszym spanom ustawiamy odpowiednie ostylowanie:
ul.tabs li span.right {
position:absolute;
right:0;
top:0;
width:8px;
height:31px;
background:url(prawy_gorny_rog_taba.gif) no-repeat;
overflow:hidden;
}
ul.tabs li:hover span.right {
position:absolute;
right:0;
top:0;
width:8px;
height:31px;
background:url(prawy_gorny_rog_taba_hover.gif) no-repeat;
overflow:hidden;
}
ul.tabs li.active span.right {
position:absolute;
right:0;
top:0; width:8px;
height:31px;
background:url(prawy_gorny_rog_active.gif) no-repeat;
overflow:hidden;
}
ul.tabs li.disable span.right {
position:absolute;
right:0;
top:0;
width:8px;
height:31px;
background:url(prawy_gorny_rog_taba_disable.gif) no-repeat;
overflow:hidden;
}
Najlepiej oczywiście jako tło zastosować odpowiednio przygotowaną grafkę, która zawierała będzie wszystkie stany tabów (obie części - prawą i lewą), którą będziemy cieli za pomocą CSS.
Powyższa technika nie musi się oczywiście kończyć na wstawieniu pojedyńczego spana. Możemy wstawiać dowolną liczbę elementów - np ukryte spany z numerem ID, który np przy kliknięciu będziemy pobierać.
Jeżeli wciąż nam za mało bajerów, możemy poszczególne treści tabów pokazywać za pomocą funkcji fadeIn(), slideDown() czy show() z ustawionym odpowiednim czasem.
//...
$li.each(function() {
$($(this).children('a').attr('href')).hide();
});
$(this).parent().addClass('active');
$($(this).attr('href')).fadeIn(500);
//...
Gotowy przykład
Poniżej zamieszczam przykład kompletnych super pięknych (no może z tym super nie przesadzajmy) tabów:
Grafika dla tła tabów:
Kod html:
<ul class="tabs"> <li class="active"><a href="#tab-1" class="active">Zakładka 1</a></li> <li><a href="#tab-2">Zakładka 2</a></li> <li><a href="#tab-3">Zakładka 3</a></li> <li><a href="#tab-4">Zakładka 3</a></li> <li><a href="#tab-5">Niestety nie działam</a></li> </ul> <div id="tab-1" class="tab"> ...Treść pierwszej zakładki </div> <div id="tab-2" class="tab"> ...Treść drugiej zakładki </div> <div id="tab-3" class="tab"> ...Treść trzeciej zakładki </div> <div id="tab-4" class="tab"> ...Treść czwartej zakładki </div> <div id="tab-5" class="tab"> ...Treść piątej zakładki </div>
Stylowanie:
/* lista z tabami */
ul.tabs {
list-style-type:none;
margin:5px 0 0 0;
padding:0;
clear:both;
background:#fefefe repeat-x;
padding-bottom:10px;
overflow:hidden;
}
/* zwykłe taby */
ul.tabs li {
height:31px;
float:left;
text-align:center;
line-height:31px;
background:url(tab_all.gif) 0 0 no-repeat;
margin-right:1px;
position:relative;
min-width:110px;
cursor:pointer;
padding:0 10px;
}
ul.tabs li span.right {
position:absolute;
right:0;
top:0;
width:9px;
height:32px;
background:url(tab_all.gif) 0 -31px no-repeat;
overflow:hidden;
}
ul.tabs li a {font-size:12px;
text-decoration:none;
color:#333;
outline:none;
}
/* taby po najechaniu */
ul.tabs li:hover {background-position:0 -62px;
color:#fff !important;
}
ul.tabs li:hover a {color:#fff;
}
ul.tabs li:hover span.right {background-position:0 -93px;
}
/* taby aktywne */
ul.tabs li.active {background-position:0 -186px;
cursor:default;
}
ul.tabs li.active a {color:#fff;
cursor:default;
}
ul.tabs li.active span.right {
background-position:0 -217px;
}
/* taby wyłączone */
ul.tabs li.disable {background-position:0 -124px;
cursor:default;
}
ul.tabs li.disable span.right {
background-position:0 -155px;
}
ul.tabs li.disable a {color:#999;
cursor:default;
}
/* powierzchnia tabow */
.tab {
display:block;
border:1px solid #c0c0c0;
border-bottom-width:3px;
background:#F8F8F8;
min-height:50px;
clear:both;
padding:10px;
margin-top:-5px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
Efekt końcowy. Dziękuję, dobranoc.