Gdy na świecie na „salony” standardów projektowania stron internetowych wchodził web 2.0, jednym z rzeczy, które przyciągały webmasterów były zakładki. Kiedyś, by stworzyć animowane menu z zakładkami trzeba było pisać niezliczoną ilość kodu, znać się przy tym bardzo dobrze na JavaScripcie. W tej chwili – nie trzeba być ani specem – ani też męczyć się z pisaniem długiego kodu do takiego menu. Dziś pokażę wam jak wykonać taki interfejs, posługując się przy tym jQuery UI.
Przygotowania:
Do naszej pracy potrzebujemy najnowszej biblioteki jQuery oraz pluginu – jQuery UI. Wszystkie pliki załączam pod tutorialem. Przyda nam się też znajomość HTML, CSS oraz podstaw jQuery. Jeśli będą problemy ze zrozumieniem czegokolwiek – proszę – napiszcie o tym w komentarzu!
Część I: Stwórzmy podstawę do działania!
Utwórzmy plik index.html z zawartością:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Zakładki jQuery UI</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jquery-ui-personalized-1.5.2.packed.js"></script> <script type="text/javascript" src="scripts.js"></script> </head> <body> </body> </html>
Teraz, gdy mamy przygotowany plik .html – tworzymy zawartość strony.
Pomiędzy znaczniki body wstawiamy:
<div id="main" class="menu"><!-- Początek głownego DIVa - main --> <ul class="nawigacja-gora"> <li><a href="#omnie">O mnie</a></li> <li><a href="#kontakt">Kontakt</a></li> <li><a href="#spolecznosci">Społeczności</a></li> </ul> <div id="omnie" class="content"><!--Omnie--> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt, diam eu pellentesque viverra, ligula nisi tempor est, tristique ullamcorper nisl est vitae sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p> </div><!--Omnie--> <div id="kontakt" class="content"> Jeśli chcesz się ze mną skontaktować - skorzystaj z <a href="mailto:mail@ferus.info" title="Wyślij maila!">tego</a> linku. <!--Kontakt--> </div><!--Kontakt--> <div id="spolecznosci" class="content"><!--spolecznosci--> </div><!--spolecznosci--> </div><!-- main -->
Najpierw definiuję głównego diva, nadając mu klasę „menu”, następnie generuję listę nieuporządkowaną w której kolejnymi punktami są odnośniki do div’ów, które znajdują się poniżej. Dzięki takiej operacji jQuery będzie dokładnie „wiedziało” o którą zakładkę nam chodzi.
Część II: Czas na magię CSS!
Aby nasze menu nie wyglądało „sztywno” – dodajmy do niego porcję CSS – wedle uznania:
* {
margin: 0;
padding: 0;
}
body {
font-size: 80%;
color: #222;
background: #ffffff;
font-family: "Helvetica", Helvetica, Arial, sans-serif;
line-height: 1.6em;
}
#main {
width: 310px;
margin: 20px auto 20px auto;
padding: 10px;
background: #e0ecff;
border: 3px solid #6694e3;
margin-bottom: 15px;
}
.nawigacja-gora li {
display: inline;
list-style: none;
padding-right: 5px;
}
.nawigacja-gora li a {
text-transform: uppercase;
background: #6694e3;
color: #ffffff;
text-decoration: none;
font-weight: bold;
padding: 4px 6px;
outline: none;
}
.nawigacja-gora li a:hover, .nawigacja-gora li a:active, .nawigacja-gora li.ui-tabs-selected a {
background: #6694e3;
color: #f5f5f5;
text-decoration: none;
}
.content {
margin-top: 2px;
background: #fff;
border: 1px solid #6694e3;
padding: 5px;
}
.content a {
color: #6694e3;
}
.content a:hover, .content a:hover, .content a:visited {
color: #e0ecff;
text-decoration: none;
}
.ui-tabs-hide {
display: none;
}
Należy pamiętać o dodaniu linii:
.ui-tabs-hide {
display: none;
}
Ponieważ ta linia odpowiedzialna jest za „schowanie” div’ów które aktualnie nie są aktywne.
Część IV: Animacje przy użyciu jQuery z pluginem jQuery UI
Aby nasz interfejs zaczął działać, musimy do pliku scripts.js dodać następujący kod:
$(document).ready(function() {
$('#main > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});
Po czym możemy odświeżyć stronę – i cieszyć się pięknym interfejsem : )
ALE!
Dla tych, którzy nie mieli za dużej styczności z jQuery:
$(document).ready(function() {
});
Ta linia mówi „do przeglądarki”: Jeśli dokument jest gotowy (jest załadowany – nawet jeśli mówimy o samym kodzie html) – wykonaj funkcję opisaną w nawiasach klamrowych.
Z kolei w nawiasach klamrowych mamy:
$('#main > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
Zaczynając od początku: Ta funkcja każe przeglądarce pobrać elementy z listy nieuporządkowanej z elementu o id #main (w tym przypadku będą to nasze odnośniki do div’ów) a następnie poprzez funkcję .tabs użyć elementy które zostały pobrane i zastosować na nich animację (fx:) której argumenty tworzą za pomocą parametru „toggle” ładny efekt zanikania i „chowania się” diva.
Efekt końcowy
Uff! Udało się? Mam nadzieję. Mój efekt końcowy możecie zobaczyć: tutaj.
Materiały powiązane z tym tutorialem
Pliki powiązane z tutorialem
Źródło skryptu – jQuery-UI-Menu.rar
Potrzebne Linki
Framework jQuery – www.jQuery.com
Jak zastosować tą opcje w wordpresie? da się zroibć z tego plugin do instalacji?
O autorze
