JavaScript - framework jQuery - przykładowe menu

Kod:

Ewentualne Objaśnienia:

Tutaj mamy przykład ciekawego menu, którego funkcjonalność osiągnęliśmy poprzez zastosowanie jQuery. Jak widzicie na przedstawionym kodzie mamy pewną listę gdzie w każdym elemencie li znajduje się pewien nagłówek menu (element h3) oraz div o klasie podmenu, który po kliknięciu w daną pozycje menu się pojawia. Widzicie też style CSS, które zastosowałem. Ale przejdźmy do rzeczy właściwej czyli kodu jQuery.

Jak i w poprzednim przykładzie po załadowaniu szkieletu dokumentu wywołujemy różne instrukcje mające na celu przypisanie pewnym elementom właściwości i akcji. Jak zapewne widzisz elementy menu (nagłówki) mają różne kolory - naprzemiennie. Nie jest to do niczego tutaj potrzebne, ale chciałem zaprezentować Wam mechanizm nadawania jakiejś grupie elementów (tutaj li) różnych własności dla elementu parzystego i nieparzystego. Zapewne nieraz widziałeś jakieś tabelki gdzie jeden wiersz miał troszkę inny odcień (czyli tło) co często dodaje czytelności dla jakiegoś spisu itp. Takie rzeczy można prosto zrobić np. w PHP w momencie generowania takiej tabeli, gdzie w pętli ustawiamy odpowiednie klasy czy też kolory "bezpośrednio". Jednak jQuery także oferuje dokonanie "czegoś takiego". Do tego służą nam :
- odd - elementy nieparzyste w kolejności (ale pamiętaj, że liczymy od 0!)
- even - jak się domyślasz el. parzyste w kolejności.
I tak właśnie nadajemy elementom h3 w naszej liście ul (o klasie 'menu_glowne') klasy czcionka1 i czcionka2 zależnie od kolejności. Za dodawanie lub usuwanie klasy dla danego elementu odpowiadają funkcje :
- addClass
- removeClass
i właśnie dzięki nim przypisujemy klasy dla elementów menu. Jak widzisz napisałem dodatkowe 2 funkcje służące do nadawania lub usuwania klasy - nie są one tutaj może jakoś specjalnie przydatne (podobnie jak 3 pierwsze zadeklarowane zmienne) można było od czynności wykonywać "od razy" - tak jak widzicie w listingu kodu gdzie mamy komentarze. Ale chciałem pokazać, że można zrobić i tak jak to uczyniłem. Jak widzisz po najechaniu na któryś z nagłówków menu to zmieniają się jego litery na wielkie. Są to elementy h3 więc zapis w CSS typu h3:hover nie zadziałałby np. w IE dlatego też korzystając z jQuery możemy ustalić jakieś działanie po najechaniu i zjechaniu z danego elementu. Służy nam do tego hover - przyjmuje 2 argumenty czyli co ma się stać po najechaniu i zjechaniu - więc jak widzisz na przykładzie po prostu dodajemy lub usuwamy klasę 'dlitery' dla naszego menu oraz zmieniamy kursor na 'łapkę'.
No i tak pozostała nam kwestia pokazywania i chowania elementów danego menu - jak się domyślasz zastosujemy coś co już znamy czyli toggle. Chodzi nam o to, że po kliknięciu w dany element h3 pojawia się element div (ten "obok" niego). Tutaj przyda się nam children - jak nazwa wskazuje odnosi się do elementów potomnych danego oraz next - określa element następny. Tak więc pobieramy sobie element li dla naszej listy ul, następnie przez children "dziecko", które jest elementem h3, ustalamy dla niego działanie dla kliknięcia czyli :
- $(this).next("div").toggle("slow"); - $(this) odnosi się oczywiście do h3, natomiast next("div") do kolejnego po nim elementu div. Czyli na chłopski rozum po kliknięciu na dany h3 wykonywany jest toggle dla elementu div, który w kodzie jest zaraz po nim.
No i zakomentowany mamy przykład gdzie menu działa troszkę inaczej - mianowicie po kliknięciu w daną pozycje w menu inne, które są aktualnie widoczne/rozwinięte się chowają. Czyli tak jak poprzednio dla danego h3 pobieramy div będący jego "sąsiadem" i wykonujemy dla niego toggle (hmm ale w tym przypadku lepiej by było dać tam show) oraz pobieramy elementy h3 ale bez tego, na który obecnie kliknięto co uzyskujemy poprzez zapis not(this) - czyli pobierze wszystkie h3 z naszej listu ul poza tym na który właśnie kliknęliśmy oraz odpowiadające im divy (w next podajemy div:visible - oznacza to, że pobierze tylko widoczne aktualnie) i dla nich wykona się funkcja hide. Czyli tak jak mówiłem menu, w które kliknięto się pojawia, a dotychczas pokazane (a właściwie będzie to jeden) znikają.

Jak i w poprzedniej lekcji do napisania tej zainspirowała mnie lekcja - http://ferrante.pl/2007/08/03/jquery-to-latwe-2/ ;)