Dynamiczne zakładki (tabs) w Ajax

Data aktualizacji: 22.04.2024r. Autor: Bartosz Stefanicki.

Zakładki (ang. tabs) są powszechnie używane na blogach i stronach internetowych. Oferują one lepsze zagospodarowanie dostępną przestrzenią.

Zaczynając od mniejszych blogów a kończąc na dużych, znanych portalach internetowych możemy zaobserwować coraz bardziej chętne i odważne korzystanie z dobrodziejstw oferowanych przez technologię Ajax. Przemawia za nią interakcja użytkownika z serwerem, która odbywa się bez konieczności przeładowywania całego dokumentu. Jest to swego rodzaju trend obecnie panujący, oraz usprawnienie pracy.

YETII - Yet (E)Another Tab Interface Implementation

To prosty interfejs napisany w Ajaxie, który umożliwia tworzenie dynamicznych zakładek. Autorem jest Grzegorz Wójcik (Kminek). Został on wymieniony w artykule 75 (Really) Useful JavaScript Techniques w znanym Smashing Magazine.

1. HTML

Tworzymy plik zakladki.html. Pierwszym elementem, który do niego wstawimy będzie treść nagłówkowa (ramy head) - tj. deklaracja HTML 4.01, kodowanie UTF-8 oraz odwołanie do plików:

yetii-min.js - plik javascript należący do skryptu Yetii. Dzięki niemu możliwe jest "schowanie" treści nieaktywnych zakładek etc,
style.css - arkusz stylów CSS, który określa kolory czcionek, tła, obramowania,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
	<script type="text/javascript" src="yetii-min.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

Kolejnym elementem będzie treść właściwa (ramy body). Zawierać będzie wykaz, oraz bloki div - poszczególne będą "ukryte" w tle za pomocą skryptu. Kontenery dla przykładu wypełniłem nazwami trzech systemów zarządzania treścią wraz z ich definicjami (WordPress, Joomla, Drupal).

<body>

<div id="tab-container-1">

<ul id="tab-container-1-nav">
  <li><a href="#wordpress">wordpress</a></li>
  <li><a href="#joomla">joomla</a></li>
  <li><a href="#drupal">drupal</a></li>
</ul>

<div class="tab" id="wordpress">
<h2>WordPress</h2>
<p>Do swojego funkcjonowania wykorzystuje silnik bazy danych MySQL. Rozpowszechniany jest na licencji GNU General Public License i jest dostępny za darmo. Najnowsza oficjalna wersja to 2.9.2 z 15 lutego 2010; 107 dni temu. WordPress jest rozwijany przez firmę Automattic.</p>
</div>

<div class="tab" id="joomla">
<h2>Joomla!</h2>
<p>Rozprowadzany na zasadach wolnego oprogramowania system zarządzania treścią napisany w języku PHP, wykorzystujący bazę danych MySQL. Joomla! jest pochodną systemu Mambo.</p>
</div>

<div class="tab" id="drupal">
<h2>Drupal</h2>
<p>System zarządzania treścią (ang. CMS), umożliwiający użytkownikowi łatwe publikowanie, zarządzanie i organizowanie zawartości strony. Wyposażony jest w funkcje, które oferują między innymi system blogów, środowiska przeznaczone do wspólnej pracy nad projektem, fora, biuletyny, galerie grafik/zdjęć, możliwość wysyłania i pobierania plików.</p>
</div>
</div>

<script type="text/javascript">
  var tabber1 = new Yetii({
    id: 'tab-container-1'
  });
</script>

2. CSS

Tworzymy plik style.css, będzie to arkusz stylów który - jak sama nazwa wskazuje - będzie zawierał listę stylów dla elementów HTML wymienionych w punkcie pierwszym.

#tab-container-1{
  font: 13px Arial, Verdana;
  color: #fff;
  margin: 20px
}

#tab-container-1 ul#tab-container-1-nav{ margin: 0; padding: 0 }
#tab-container-1 ul#tab-container-1-nav li{ display: inline }

#tab-container-1 ul#tab-container-1-nav li a{
  padding: 5px 10px;
  background: #d9d9d9;
  border: 1px solid #999;
  color: #25252E;
  text-decoration: none
}

#tab-container-1 .tab{
  margin-top: 8px;
  padding: 5px 20px;
  background: #eee;
  border: 1px solid #ddd
}

#tab-container-1 #wordpress{ background: #660033 }
#tab-container-1 #joomla{ background: #330066 }
#tab-container-1 #drupal{ background: #006600 }

3. JavaScript

Plik ze skryptem YETII można pobrać na dole tej porady. Więcej informacji na temat użycia oraz możliwych konfiguracjach, znajdziesz na stronie autora skryptu - http://www.kminek.pl/yetii/.

Pozostałe skrypty

Lista skryptów napisanych w JavaScript, które podobnie jak wymieniony wyżej, oferują użytkownikom prostym sposobem stworzenie zakładek na stronie.

jQuery UI Tabs
Skrypt napisany w jQuery, który zawiera szeroki wachlarz opcji konfiguracyjnych - ciekawe efekty przejść, możliwość "umieszczenia zakładek w zakładkach - zakorzenienie",
MooTabs
Niewielka klasa napisana pod MooTools, która waży zaledwie 3kb. Korzysta z JavaScript i CSS, ładuje zakładki poprzez zapytanie w Ajaxie,
DOMTab
Popularny skrypt umożliwiający tworzenie zakładek na stronach, korzysta z CSS i interfejsu DOM,
JavaScript Tabifier
Stwórz zakładki na swojej stronie za pomocą plug-and-play, skryptu w JavaScript/CSS, prosty w użyciu.