kminek.pl

Yetii – czyli moje podejście do tematu “zakładek” Grzegorz Wójcik

11 Sep, 2008  |  Artykuły, JavaScript

Yetii został wymieniony w artykule [1] 75 (Really) Useful JavaScript Techniques w prestiżowym Smashing Magazine - cóż za zaszczyt! :)

Zakładki (ang. tabs) są coraz częściej wykorzystywanym „interaktywnym” elementem stron internetowych. Sprawdzają się zwłaszcza w sytuacji, gdy na stronie jest naprawdę tłoczno (przykładowo jest to strona główna serwisu) i dysponujemy ograniczonym obszarem dla zaprezentowania większej ilości informacji.

W Internecie znajdziemy mnóstwo darmowych „zakładkowych” skryptów, jednak większość z nich ma kilka podstawowych wad:

Wychodząc naprzeciw tym problemom postanowiłem napisać we własnym zakresie coś małego i funkcjonalnego zarazem – Panie i Panowie – przedstawiam wam Yetii (ang. Yet (E)Another Tab Interface Implementation).

Yetii – funkcjonalność

Demo

Skrypt w działaniu można zobaczyć na [2] tej stronie.

Użycie

  1. [3] Pobierz plik z kodem źródłowym Yetii i dołącz go do swojej strony:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5.     <script type="text/javascript" src="yetii.js"></script>
  6. </head>
  1. Przygotuj kod HTML zakładek:
  1. <body>
  2.     <!-- zakładki -->
  3.     <div id="tab-container-1">
  4.         <ul id="tab-container-1-nav">
  5.             <li><a href="#tab1">tab 1</a></li>
  6.             <li><a href="#tab2">tab 2</a></li>
  7.         </ul>
  8.         <div class="tab" id="tab1">
  9.             <h2>tab 1</h2>
  10.             <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  11.         </div>
  12.         <div class="tab" id="tab2">
  13.             <h2>tab 2</h2>
  14.             <p>It was popularised in the 1960s with the release of Letraset sheets.</p>
  15.         </div>
  16.     </div>
  17.     <!-- zakładki -->
  18. </body>

Jak widać w powyższym przykładzie pojemnikiem definiującym grupę zakładek jest div o id="tab-container-1". Wewnątrz pojemnika umieszczona jest nieuporządkowana lista linków, za pomocą których możliwe stanie się przełączanie między poszczególnymi zakładkami. Lista powinna mieć przypisane odpowiednie id, które powstaje z połączenia id pojemnika i końcówki -nav.

Yetii linkowi aktywnej zakładki dynamicznie przypisuje klasę active:

  1. <ul id="tab-container-1-nav">
  2.     <li class="activeli"><a class="active" href="#tab1">tab 1</a></li>
  3.     <li><a href="#tab2">tab 2</a></li>
  4. </ul>

Specjalna klasa CSS (domyślnie activeli) przypisywana jest także elementowi listy, w którym znajduje się aktywny link. Jeśli zmienimy nazwę aktywnej klasy np. na aktywny to do elementu listy zostanie przypisana klasa aktywnyli.

Dzięki kreatywnym stylom CSS można bardzo prosto przekształcić tę nieuporządkowaną listę w grupę zgrabnych przycisków do przełączania zakładek – [4] zobacz arkusz CSS ze strony demonstracyjnej.

Zawartość poszczególnych zakładek powinna zostać umieszczona jest w blokach div z klasą tab.

  1. Zainicjalizuj obiekt Yetii:
  1. <body>
  2.     <div id="tab-container-1">
  3.         <ul id="tab-container-1-nav">
  4.             <li><a href="#tab1">tab 1</a></li>
  5.             <li><a href="#tab2">tab 2</a></li>
  6.         </ul>
  7.         <div class="tab" id="tab1">
  8.             <h2>tab 1</h2>
  9.             <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  10.         </div>
  11.         <div class="tab" id="tab2">
  12.             <h2>tab 2</h2>
  13.             <p>It was popularised in the 1960s with the release of Letraset sheets.</p>
  14.         </div>
  15.     </div>
  16.     <script type="text/javascript">
  17.     var tabber1 = new Yetii({
  18.         id: 'tab-container-1'
  19.     });
  20.     </script>
  21. </body>

Aby określić domyślnie aktywną zakładkę (np. drugą):

  1. var tabber1 = new Yetii({
  2.     id: 'tab-container-1',
  3.     active: 2
  4. });

Aby uaktywnić mechanizm automatycznej rotacji zakładek (interwał rotacji wyrażony jest w sekundach):

  1. var tabber1 = new Yetii({
  2.     id: 'tab-container-1',
  3.     active: 2,
  4.     interval: 5
  5. });

Domyślnie mechanizm rotacji wyłącza się w momencie, gdy użytkownik kliknie jakąś zakładkę. Jednak jeśli obok parametru interval określimy dodatkowo parametr wait:

  1. var tabber1 = new Yetii({
  2.     id: 'tab-container-1',
  3.     active: 2,
  4.     interval: 5,
  5.     wait: 10
  6. });

w momencie kliknięcia w zakładkę rotacja „zastygnie” na określoną liczbę sekund (10 w powyższym przypadku) i po tym czasie będzie kontynuowana.

Aby dostosować nazwy klas CSS, które wykorzystywane są przez skrypt do generowania zakładek:

  1. var tabber1 = new Yetii({
  2.     id: 'tab-container-1',
  3.     active: 2,
  4.     interval: 5,
  5.     tabclass: 'mojaklasazakladki',
  6.     activeclass: 'mojaklasaaktywnegolinku'
  7. });

Możliwe jest także „ręczne” wywołanie metody odpowiedzialnej za pokazanie konkretnej zakładki w danej grupie zakładek:

  1. <a href="#" onclick="tabber1.show(2); return false;">Pokaż zakładkę numer 2</a>

Istnieje także możliwość podpięcia własnej funkcji, która wykonywana będzie w momencie kliknięcia w zakładkę:

  1. function mojafunkcja(zakladka) {
  2.     if (zakladka==2) alert('Kliknąłeś zakładkę nr 2');
  3. }
  4.  
  5. var tabber1 = new Yetii({
  6.     id: 'tab-container-1',
  7.     callback: mojafunkcja
  8. });

Funkcję wykonywaną w momencie opuszczenia danej zakładki podpinamy w następujący sposób:

  1. function mojafunkcja(zakladka) {
  2.     if (zakladka==1) alert('Opuściłeś zakładkę nr 1');
  3. }
  4.  
  5. var tabber1 = new Yetii({
  6.     id: 'tab-container-1',
  7.     leavecallback: mojafunkcja
  8. });

Zagnieżdżając jakąś grupę zakładek wewnątrz innej „nadrzędnej” zakładki należy pamiętać, aby ustawić inne klasy dla zakładek z obu tych grup (parametr tabclass) np.:

  1. var grupa_nadrzedna = new Yetii({
  2.     id: 'grupa_nadrzedna'
  3. });
  4.  
  5. var podgrupa = new Yetii({
  6.     id: 'podgrupa',
  7.     tabclass: 'jakasinnaklasa'
  8. });

Aby stworzyć link na stronie B do konkretniej zakładki na stronie A należy zbudować go w następujący sposób:

  1. <a href="stronaA.html?tab-container-1=2">2 zakładka wewnątrz tab-container-1 na stronie A</a>

gdzie tab-container-1 jest pojemnikiem grupy zakładek, wewnątrz której chcemy wybrać zakładkę (drugą w przykładzie powyżej). Zamiast wartości numerycznej można także podać DOM id zakładki, która ma być aktywna np.:

  1. <a href="stronaA.html?tab-container-1=tab2">2 zakładka wewnątrz tab-container-1 na stronie A</a>

Aby włączyć mechanizm „pamiętania” ostatnio klikniętej zakładki (np. pomiędzy poszczególnymi przeładowaniami strony) należy zainicjalizować obiekt Yetii z parametrem persist:

  1. var tabber1 = new Yetii({
  2.     id: 'tab-container-1',
  3.     persist: true
  4. });

Informacje o ostatnio klikniętej zakładce przechowywane są w ciasteczkach sesyjnych, które wygasają w momencie zamknięcia okna przeglądarki. W sytuacji, gdy jednocześnie włączony jest mechanizm pamiętania klikniętej zakładki, określono aktywną zakładkę za pomocą parametru w adresie URL i skrypt zaincjalizowo z parametrem active stosowana jest następująca hierarchia pierwszeństwa:

zapamiętana zakładka « parametr w adresie URL « parametr active

Pobierz Yetii

Wszelkie sugestie na temat skryptu i ewentualne propozycje poprawek jak zawsze mile widziane.

-----

Wydrukowano z: https://www.kminek.pl/yetii/

Lista adresów URL występujących w tekście:

© 2007-2025 kminek.pl