Podstawy jQuery
Wyobraźcie sobie, że macie do wykonania animowane rozwijane menu. Można to zrobić przy pomocy Flash, ale nie koniecznie jest to dobry pomysł.. Dlaczego?.. Za…
Artykuł, który masz przed sobą, stanowi krótkie wprowadzenie do technologii jQuery, coraz bardziej popularnej w internecie. Jest to pierwsza część kursu, którego kolejne odsłony będą pojawiać się na blogu. Życzę miłej lektury!
Wprowadzenie:
Wyobraźcie sobie, że macie do wykonania animowane rozwijane menu. Można to zrobić przy pomocy Flash, ale nie koniecznie jest to dobry pomysł.. Dlaczego?.. Za każdym razem gdy będziecie chcieli dodać jakąś kolejną zakładkę do menu, będzie trzeba odpalić naszego flasha i poświęcić parę minut na kopiowanie klatek, podmianie treści, zmianie URLi itd. – zupełna strata czasu. Oczywiście można by było coś pokombinować z XML, ale po co utrudniać sobie życie jeśli możemy skorzystać z jQuery, który w bardzo łatwy sposób pozwala nam zrobić m.in. to nasze rozwijane menu…
W tym tutorialu przedstawię Wam podstawy, które niestety trzeba opanować, by w pełni móc wykorzystać możliwości jQuery – tak więc zapraszam do nauki 😉
Etap 1: Przygotowujemy nasze środowisko pracy.
- Ściągamy bibliotekę jQuery (wersję „Development”) z oficjalnej strony: http://jquery.com/
- W dokumencie HTML w sekcji <head> musimy wywołać jQuery. Przy okazji stwórzmy plik ‘’nasze-skrypty.js” gdzie będziemy pisać nasze skrypty, a zatem:
<script language=”JavaScript” type=”text/javascript” src=”jQuery.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”nasze-skrypty.js”></script>
Etap 2: Poznajemy podstawy.
jQuery, jak wcześniej pisałem, opiera się na języku JavaScript, który jest w pewnym stopniu podobny do ActionScript, przyjmuję że już go znacie jak i HTML, jeśli nie to odsyłam na eduweb.pl – tam znajdziecie świetne kursy programowania w tychże językach. Ok zabierzmy się więc do dzieła!
Prawie każda dostępna biblioteka operuje na zwyczajnych tablicach, elementach DOM czy innych obiektach. Nie inaczej jest z jQuery.
Kod jQuery opakowuje każdy z nich w unikalną konstrukcję, która pozwala na używanie specjalnych funkcji oraz wykorzystywanie zdolności biblioteki.
$(document).ready(fucnction () {
// tu piszemy akcje, które będą wykonywane po załadowaniu strony..
});Powyższy zapis „uruchamia” jQuery. W środku funkcji możemy umieszczać akcje i kolejne funkcje jQuery.
Podam teraz „przepis”, który będziecie mogli dostosować go później do własnych. Wygląda on następująco:
$(‘element’).akcja(‘parametry’);$() – tak naprawdę wszystko co robimy w tym frameworku, kręci się wokoło tego aliasu do funkcji o nazwie jQuery(). To ona tworzy obiekt jQuery.
element – wybieranie elementów oparte o selektory CSS. Dostępny jest ogromny wybór selektorów ze specyfikacji CSS oraz kilkanaście autorskich rozwiązań autorów jQuery. czyli dla przykładu wybierzmy z poziomu jQuery akapity, nic prostszego – robimy to w taki sposób: $(‘p’);
akcja – tu umieszczamy akcje, która będzie wykonywana na danym elemencie.
parametry – jak sama nazwa mówi, wpisujemy tu parametry danej akcji, czyli np. akcja hide(700) ukryje nam jakiś element, a animacja będzie trwała 700 milisekund.
Dla podsumowania i zrozumienia tego przepisu napiszmy skrypt, który będzie nam ukrywać blok div o klasie ‘mojasympatia’, będzie się ukrywał 200 milisekund. Aby nie było to takie bezsensowne przyjmijmy, że w divie znajduje się zadanie dla naszej sympatii, która będzie musiała zajrzeć do kodu źródłowego by poznać jego treść. Oto kod:
$(document).ready(fucnction () {
$(‘.mojasympatia’).hide(200);
});Posiadając już podstawową wiedzę o budowie skryptu jQuery możemy zbudować własny, ułatwi nam to poniższa tabela z najciekawszymi funkcjami.
| Funkcja (akcja) | Przyjmowane parametry | Opis |
| show() | Czas animacji | Efekt pojawiania się elementu |
| hide() | Czas animacji | Efekt chowania się elementu |
| click() | Funkcja – np.: $(‘p’).click(function () { //akcja po zdarzeniu }); | Gdy klikniemy na element będzie wykonana jakaś inna funkcja. |
| toggle() | Czas animacji | Element jest zwijany i rozwijany. |
| fadeIn() | Czas animacji | Efekt pojawiania się elementów po kolei |
| fadeOut() | Czas animacji | Znikanie kolejnych elementów |
| animate() | Wartości elementu po animacji, czas animacji – np.: $(„#block”).animate({ width: „70%” // szerokość, opacity: 0.4 //przezroczystość, borderWidth: „10px” szerokość obramowania }, 1500 //czas ); | Efekt animacji elementu… |
Skoro już mamy te podstawowe informacje, zajmijmy się praktycznym przykładem:
Zanim zaczniemy omawiać kod menu, zerknijmy najpierw jak ono będzie wyglądać i funkcjonować – zobacz tutaj. Jak zapewne zauważyliście, menu posiada jeden element graficzny, a mianowicie tło pod zakładką, które się powiela w poziomie. Takie tło możemy stworzyć w dowolnym programie graficznym np. Adobe Photoshop. Nie będziemy się zagłębiać jak takie tło powstaje, skupimy się bardziej na kodzie. Więc zaczynamy! 😉
Etap 1: Szablon HTML/CSS
Pierwszym krokiem jest napisanie podstawowego szablonu w HTML i „ostylowanie” go w CSS. Poniżej umieszczam przykład takiego szablonu. Zakładam, że znacie podstawy HTML i CSS, więc nie będziemy specjalnie omawiać poniższych kodów.
Kod HTML (pomiędzy tagami <body>…</body>):
Zakładka 1
Zakładka 2
Zakładka 3
Zakładka 4
Kod CSS (plik style.css):
#menu {
width:238px;
}
#menu .zakladka {
background:url(images/bg_menu.jpg) top left repeat-x;
font:1.0em Verdana, Geneva, sans-serif;
color:#ed4949;
padding:2px 12px 0px;
margin:0px;
float:left;
width:230px;
height:29px;
}
#menu ul {
background:#690305;
padding:3px 7px 5px;
float:left;
width:100%;
margin:-3px 0px 0px 0px;
}
#menu ul li {
background:#930306;
border-bottom:solid 1px #b10e0e;
list-style:none;
display:block;;
height:14px;
width:100%;
padding:3px 2px;
margin-bottom:2px;
}
#menu ul li a {
display:block;
font-size:0.8em;
color:#dad5d5;
text-decoration:none;
}Etap 2: Omawiamy potrzebne funkcje jQuery..
Wkraczamy w najciekawszy prawdopodobnie etap tego tutorialu. Postaram się teraz opisać w miarę jasno funkcje, które potem „skleimy” w całość tak aby nasze menu było w pełni funkcjonalne.
hide() – ukrywa podmenu od razu po wejściu na stronę.
click() – obsługuje kliknięcie. W środku tej funkcji umieścimy kolejną funkcję, która będzie rozwijać i zwijać podmenu.
slideToggle() – funkcja ta rozwija i zwija (w pionie) dany element, w naszym przypadku będzie to podmenu (<ul>…</ul>).
mouseover() – obsługuje najechanie na element. W środku tej funkcji umieścimy kolejną funkcje, która będzie animować zakładkę.
mouseout() – obsługuje zdarzenie po zjachaniu z elementu.
animate() – umożliwia animować elementy. My użyjemy tej funkcji aby zaanimować zakładkę
next() – wskazuje następny element po poprzednim (np. $(‘.zakladka’).next(‘ul’); ).
Etap 3: Analizujemy gotowy skrypt jQuery.
Poniżej umieszczam gotowy skrypt z komentarzami, które pozwolą Wam lepiej zrozumieć jak to wszystko działa.
Kod JavaScript (nasze-skrypty.js):
//Start jQuery
$(document).ready(function (){
//efekt po najechaniu najechaniu na zakladkę
$(".zakladka").mouseover(function() {
$(this).animate({
width: "245", //szerokość zakładki
}, 140 //czas animacji w milisekundach
);
});
//powrót do pierwotnej formy zakładki
$(".zakladka").mouseout(function() {
$(this).animate({
width: "230" //rozszerzenie zakładki
}, 150 //czas animacji w milisekundach
);
});
//efekt pozycji podmenu
$("li").mouseover(function() {
$(this).animate({
opacity: 0.5, //przezroczystość elementu na 50%
paddingLeft: "0.3em" // małe przesunięcie treści
}, 155 //czas animacji w milisekundach
);
});
//powrót do pierwotnej formy podmenu
$("li").mouseout(function() {
$(this).animate({
opacity: 1.0, //przezroczystość elementu na 100%
paddingLeft: "0.0em"
});
});
$("ul").hide(); // ukrywa podmenu
$('.zakladka').click(function(){
//akcja po kliknięciu w zakładkę
$(this).next('ul').slideToggle(300); // sektor
- znajdujący się pod zakładką, który będzie się zwijać i rozwijać po każdym kliknięciu
});
}); //koniec jQuery
Tutaj możecie pobrać gotowe, działające menu.
Autor: Łukasz Czerwiński