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.
Warto zobaczyć
Szukasz hostingu?
Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie najciekawszych propozycji i ranking hostingów (Kwiecień 2024).
Data publikacji: Czwartek, 24.06.2010. Tagi: ajax, css, html, skrypty. Źródło obrazka porady: Logo YETII.