BETA
Aby się zalogować, najpiew wybierz portal.
Aby się zarejestrować, najpiew wybierz portal.
Podaj słowa kluczowe
Słowa kluczowe muszą mieć co najmniej 3 sąsiadujące znaki alfanumeryczne
Pole zawiera niedozwolone znaki

Baza wiedzy











Animowane poziome menu typu Drop-down

29-05-2013 15:30 | Krzysztof Idzik
Część czwarta praktycznego kursu "jQuery - ograniczeniem jest wyobraźnia", będzie podsumowaniem dotychczasowych trzech odcinków oraz podczas której nauczysz się obsługi filtrów.

Rozpoczęcie pracy

Przed rozpoczęciem pracy powinieneś:

  • Znać podstawy języka HTML,
  • Znać podstawy pozycjonowania css,
  • Zapoznać się z poprzednimi odcinkami kursu.

Implementacja

Utwórz na dysku odpowiednie katalogi oraz pobierz bibliotekę jQuery ze strony http://www.jquery.com/ (możesz również korzystać z poprzednich projektów omawianych w kursie).

Utwórz plik index.html, w sekcji <body></body> umieść kod (Skrypt 1) , który będzie strukturą poziomego menu.

<div id="linki">
	<ul class="glowne_menu">
			
		<li><a href="#" class="parent"> Link 1 </a>
		<div class="pod_menu">
			<ul>
				<li><a href="#"> Link 1.1 </a></li>
				<li><a href="#"> Link 1.2 </a></li>
				<li><a href="#"> Link 1.3 </a></li>
				<li><a href="#"> Link 1.4 </a></li>
				<li><a href="#"> Link 1.5 </a></li>
			</ul>
		</div></li>
			
		<li><a href="#" class="parent"> Link 2 </a>
		<div class="pod_menu">
			<ul>
				<li><a href="#"> Link 2.1 </a></li>
				<li><a href="#"> Link 2.2 </a></li>
				<li><a href="#"> Link 2.3 </a></li>
				<li><a href="#"> Link 2.4 </a></li>
				<li><a href="#"> Link 2.5 </a></li>
			</ul>
		</div></li>
			
		<li><a href="#" class="parent"> Link 3 </a>
		<div class="pod_menu">
			<ul>
				<li><a href="#"> Link 3.1 </a></li>
				<li><a href="#"> Link 3.2 </a></li>
				<li><a href="#"> Link 3.3 </a></li>
				<li><a href="#"> Link 3.4 </a></li>
				<li><a href="#"> Link 3.5 </a></li>
			</ul>
		</div></li>
			
	</ul>
</div>

Skrypt 1

Utwórz czysty dokument. Zapisz go pod nazwą "style", z rozszerzeniem .css. Utworzony plik umieść w katalogu z nazwą css. W dokumencie umieść następujący kod (Tabela 1) formatujący strukturę HTML:

Lp. Kod Objaśnienie
1. ul, ul li {  
2.       display: block; Def. Wyświetlania domyślnego
3.       list-style: none; Usunięcie stylu listy
4.       margin: 7px 0px 7px 0px; Nadanie marginesów zewnętrznych
5. }  
6. ul li {  
7.       display: inline; Def. Wyświetlania liniowego
8.       white-space: nowrap; Def. Wyświetlania białych znaków
9. }  
10. .pod_menu {  
11.       display:none; Ukrycie elementów
12.       width: 200px; Nadanie szerokości
13.       background: #013d6d; Nadanie tła
14.       position: absolute; Pozycjonowanie - absolutne
15.       z-index: 100; Nadanie warstwy
16.       margin-top: 28px; Nadanie górnego marginesu
17.       margin-left: -66px; Nadanie lewego marginesu
18. }  
19. .pod_menu ul li a {  
20.       display: block;  
21.       list-style: none;  
22.       text-decoration: none; Usunięcie podkreślania
23.       font-family: Arial; Nadanie czcionki
24.       color: white; Nadanie koloru czcionce
25.       margin: 5px 5px 0px 5px;  
26.       padding: 3px; Nadanie marginesów wewnętrznych
27. }  
28. .parent {  
29.       text-decoration: none;  
30.       color: #448fca;  
31.       font-family: Arial;  
32.       padding: 5px 10px 5px 10px;  
33. }  
34. .parent {  
35.       text-decoration: none;  
36.       color: white;  
37.       background: #013d6b;  
38.       font-family: Arial;  
39.       padding: 5px 10px 5px 10px;  
40. }  
 

Tabela 1

W sekcji <head></head> dołącz plik (Skrypt 2) ze stylami:

<link href="css/style.css" rel="stylesheet" type="text/css" />
 

Skrypt 2

Poniżej dołączenia linku do styli oraz biblioteki jQuery umieść skrypt (Skrypt 3) animujący menu:

<script>
$(document).ready(function () {
	$("#linki .glowne_menu li .parent").mouseover(function () {
		$(".pod_menu").hide();
		$(".pod_menu").prev().removeClass("parent_current");
		$(this).addClass("parent_current");
		$(this).next().show(500);
	});
	$(".pod_menu ul li a").mouseover(function () {
		$(".pod_menu ul li a").css("background", "none");
		$(this).css("background", "#448fca");
	});
	$(".pod_menu ul li a:even").css("font-weight", "bold");
	$(".pod_menu ul li a:odd").css("Color", "orange");
});
</script>

Skrypt 3

Wyjaśnienie kodu:

  • Linia 3: Uruchomienie akcji po najechaniu kursorem na wskazany element z menu głównego.
  • Linia 4: Ukrycie wszystkich "pod menu".
  • Linia 5: Usunięcie klasy ( .removeClass(); ) "parent_current", poprzedniemu ( .prev(); ) w hierarchii elementowi powyżej elementu posiadającego klasę ".pod_menu".
  • Linia 6: Nadanie klasy ( .addClass(); ) "parent_current" wskazanemu (this) przez użytkownika elementowi.
  • Linia 7:  Pokazanie ( .show(); ) następnego ( .next(); ) w hierarchii elementu w stosunku do elementu wskazanego przez użytkownika.

 

  • Linia 9: Uruchomienie akcji po najechaniu kursorem na linki w podmenu.
  • Linia 10: Ukrycie tła dla wszystkich linków w podmenu.
  • Linia 11: Nadanie koloru tła dla wskazanego przez użytkownika elementu.

 

  • Linia 13: Użycie filtra wybierającego tylko elementy parzyste (:even) znajdujące się w podmenu i nadanie im pogrubionej czcionki.
  •  Linia 14: Użycie filtra wybierającego tylko elementy nieparzyste (:odd) znajdujące się w podmenu i nadanie im pomarańczowego koloru.

Efekt pracy (Rysunek 1):

Rysunek 1

Filtry

Selektory możesz łączyć z filtrami, co rozszerza ich możliwości. Filtr działa jak sito i przepuszcza tylko określone elementy. Filtry w jQuery rozpoczynają się dwukropkiem.

Podstawowe filtry:

  • $("ul li:first") // wybiera pierwszy element
  • $("ul li:last") // wybiera ostatni element
  • $("ul li:even") // wybiera elementy parzyste,
  • $("ul li:odd") // wybiera elementy nieparzyste,
  • $("ul li:eq(n)") // wybiera element równy n,
  • $("ul li:gt(n)") // wybiera elementy mniejsze od n,
  • $("ul li:lt(n)") // wybiera elementy większe od n.

Filtry potomków:

Do wyboru potomków służą filtry:

  • $("p a:first-child") // wybiera pierwsze dziecko
  • $("p a:last-child") // wybiera ostatnie dziecko
  • $("p a:nth-child(n) ") // wybiera n-te dziecko indeksując od 1
  • $("p a:only-child") // wybiera jedynaków. Zostają wybrane tylko te linki, które jako jedyne znajdują się w paragrafie. Jeśli w paragrafie znajduje się więcej niż jeden link, linki te zostaną pominięte.

Filtry zawartości:

Chcąc wybrać elementy zawierające jakiś dany tekst użyj filtra :contains("tekst"), gdzie w miejsce tekst wpisz szukaną zawartość.

  • $("li:contains("Radek")")

Do znajdywania znaczników posłuż się filtrem :has(znacznik)

  • $("li:has(a)")

Do znajdywania pustych elementów posłuż się filtrem :empty

  • $("td:empty")

Do wyboru elementów zawierających potomstwo posłuż się filtrem :parent

  • $("td:parent")

Filtry formularzy:

Filtry formularzy dzieli się na dwie grupy:

filtry wybierające (czy dany element jest widoczny, włączony, zaznaczony):

  • :visible, :hidden // wybiera, czy element jest widoczny/niewidoczny,
  • :enabled, :disabled // wybiera, czy element jest włączony/wyłączony,
  • :checked // wybiera, czy element jest zaznaczony,
  • :selected // wybiera, czy element wybrany.

filtry bezpośrednio związane z polami formularza:

  • :input// filtr wybierający elementy input
  • :text// filtr wybierający elementy input type="text"
  • :password// filtr wybierający element input type="password"
  • :radio// filtr wybierający element input type="radio"
  • :checkbox// filtr wybierający element input type="checkbox"
  • :button// filtr wybierający element input type="button"
  • :submit// filtr wybierający element input type="submit"
  • :reset// filtr wybierający element input type="reset"
  • :image// filtr wybierający element input type="image"
  • :file// filtr wybierający element input type="file"

Filtry atrybutów:

Wybierając elementy na stronie możesz kierować się ich atrybutami. Filtry atrybutów umieszcza się w nawiasach kwadratowych i dopisuje przed zwykłymi filtrami. Ogólna konstrukcja:

  • nazwa_atrybutu operator "wartość".

Operatory:

  • = (operator równości)
  • != (operator zaprzeczenia)
  • *= (operator zawierania)
  • ^= (operator zawierania na początku – prefiks)
  • $= (operator zawierania na końcu – sufiks)

Przykład:

  • $("h1[class*="news"]") // Selektor ten wybierze wszystkie znaczniki h1 zawierające w nazwie słowo "news".

Filtry atrybutów możesz łączyć ze zwykłymi filtrami:

  • $("div[class*="news"]:not(:first)") // Selektor wybierze wszystkie znaczniki div zawierające słowo "news" z wyjątkiem pierwszego. 

Podsumowanie

W czwartej części kursu podsumowałeś dotychczasową wiedzę. Poznałeś również filtry oraz nauczyłeś się wykorzystywać je w projekcie strony www.

Gotowy projekt tego odcinka znajdziesz pod linkiem http://sdrv.ms/ZsZM7j

W następnym odcinku

W następnym odcinku dowiesz się, w jaki sposób zrobić galerię zdjęć typu slideShow.

tagi: jQuery

Komentarze 2

aKs
aKs
1706 pkt.
Guru
aKs
04-06-2013
oceń pozytywnie 0
dla mnie artykuł kończy się na niemożności skopiowania css z "tabela 1" :/
Krzysztof Idzik
Krzysztof Idzik
183 pkt.
Junior
Uczestnik projektów
04-06-2013
oceń pozytywnie 0
zawsze można spróbować przepisać lub przejść do Podsumowanie, w którym zawsze jest link do gotowego projektu odcinka ;)
pkt.

Zaloguj się lub Zarejestruj się aby wykonać tę czynność.