jQuery: pronaći ()
jQuery je velika JavaScript okvir. Ako niste imali priliku raditi s njim, nadam se da sljedeći publikacija, poticat će vas da iskoristite ovaj rješenja. Budući da se odlikuje brzinom, optimizacijom koda ga smjestiti u što više preglednicima, kao što vjerojatno mnogi od najzanimljivijih - lako za izgradnju složenih rješenja.
U današnjem članku će se fokusirati na vrlo koristan način pronaći ().
Ako niste se bavi tom okviru, pozivam Vas da se upoznate s osnovama selektora, koristeći službeni API na selectorów , ili priprema Bartosz Medonia jQuery osnove naravno . Ovo znanje će uvelike olakšati razumijevanje rješenja prezentiranih u ovom dokumentu.
Najbolji idemo dobiti neki konkretan primjer ove metode. Na većini stranica, jedan od osnovnih elemenata za navigaciju izbornika. Mi ćemo pokušati stvoriti vlastiti animirani izbornik koristeći minimalni broj komponenti i rade pod bilo kojim preglednikom koji podržava JavaScript.
Prvi Izrada elemenata
Počnimo stvaranjem prazan HTML dokument:
<DOCTYPE html JAVNO! "- / / 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> Izbornik </ title> </ Head> <body> </ Body> </ HTML>
Tada zgrabite najnoviju verziju jQuery iz službenoj stranici projekta (proizvodnja) i kopirajte ga u mapu naših HTML datoteke.
U tom dokumentu, bi mogao koristiti neke uzorak sadržaja i naš izbornik. Koristi se za ovaj div i span oznake. Naravno, predmeti na našem jelovniku, mora biti linkovi, tako da ih stavite u blok. Cijeli staviti unutar bloka div s id = izbornika. Dodano datoteku koristeći jQuery skripte oznaku. Cijeli bi trebao izgledati ovako:
<div id="menu"> <div> href # 1 izbornik </ a> <span> href # 1,1 izbornik </ a> href # 1,2 izbornik </ a> href # 1,3 izbornik </ a> </ Span> </ Div> <div> href # 2 Meni </ a> <span> href # 2,1 izbornik </ a> href # 2,2 izbornik </ a> href # 2,3 izbornik </ a> href # 2,4 izbornik </ a> href # 2,5 izbornik </ a> </ Span> </ Div> <div> href # 3 Meni </ a> <span> href # 3,1 izbornik </ a> href # 3,2 izbornik </ a> href # 3,3 izbornik </ a> href # 3,4 izbornik </ a> </ Span> </ Div> <div> href # 4 Menu </ a> <span> href # 4,1 izbornik </ a> href # 4,2 izbornik </ a> </ Span> </ Div> </ Div> <- Kraj # izbornik -> Postoje neki uzorak sadržaj. Postoje neki uzorak sadržaj. Postoje neki uzorak sadržaj. Postoje neki uzorak sadržaj. Postoje neki uzorak sadržaj. Postoje neki uzorak sadržaj. Postoje neki uzorak sadržaj. Postoje neki uzorak sadržaj. Postoje neki uzorak sadržaj. Postoje neki uzorak sadržaj. <script type="text/javascript" src="jquery.js"> </ script>
Posebno staviti mnoge stavke na izborniku pokazati kako je lako će privući mnoge od njih s jQuery, ovisno o tome koji smo blok pomicanje miša.
Drugi Definirati izgled izbornika (CSS)
U ovom poglavlju ćemo definirati izgled koristi u HTML datoteku kod blokova. Bio sam spreman, sljedeći kod u stilu, koji se nalazi u glavu odjeljku:
<style type="text/css"> <- * {Margin: 0px, padding: 0px;} A {text-decoration: none; font: 20px Gruzija, "Times New Roman" i Times, serif;} html, body {margin: 10px;} # Izbornik {top: 0px; plovak: lijevo, širina: 100%;} Div # menu {position: relativna; plovak: lijevo;} Div # menu: aktivna, div # menu a: link, div # menu: visited {display: block; položaj: relativni, okomito-align: srednje; background: # ccc; color: # fff; padding: 10px 5px; širina: 150px;} Div # menu a: hover {background: # 999;} Div # menu span {display: none; položaj: apsolutni, top: 100%; lijevo: 0; float: none;} Div div # menu: aktivna, # izbornik div div: link, div # menu pedalj: visited {Pozicija: relativni, prikaza: blok, plovak: lijevo; top: 0px; pozadine: DDD; # boja: # fff; padding: 10px 5px; širina: 150px;} Div div # menu a: hover {background: # 999;} -> </ Style>
U našem primjeru, mi stvaramo samo jednostavan dvije razine izbornik, ali ne postoji ništa na način da ih mijenjati i prilagoditi na bilo koji broj razinama.
Ako smo u ovom trenutku, trebali biste također se odnose na okvir za stvaranje css'owego izbornika .
Treći Noktiju programa - pronaći.
Do te mjere, spremni smo provesti puno radno stranicu JavaScript koda. Također znamo, kao što je spomenuto, kazavši kako je odabir. U našem slučaju, primjer je vrlo jednostavna, jer postoje samo četiri glavni izbornik, no nije teško zamisliti da postoji svibanj biti više, a svaki može imati više grana. Ovo diskvalificira na način petlje, također isključuje brutalni, Ispitujući sve slučajeve zasebno. No, zahvaljujući pronaći metodu, problem se svodi na jedan vrlo jasan redak koda koji obavljaju cijeli posao za nas. Dobro je da naš JavaScript kôd bio u $ (document). Ready, osiguravajući da se odnosi na to kada se stranica učita, sve vanjske skripte, stilovi i drugih datoteka.
<script type="text/javascript"> <- / / <! [CDATA [ $ (Dokument). Ready (funkcija () { $ ("# Div izbornik"). Zadržite pokazivač ( Funkcija () { . $ (Ovo) Pronađite ("p") CSS ({opacity: 0.98}) SlideToggle ("brza");.. } Funkcija () { . $ (Ovo) Pronađite ("p") SlideToggle ("brza").; } ); }); / /]]> -> </ Script>
Kod iznad Preporučujem staviti skriptu oznake, koje se odnose na jQuery, na dnu.
U glavnom sklopkom, pogledajte oznaku od id = "izbornika", unutar koje postoji div. Metoda. Zadržite pokazivač (), znači upasti pojava miša, odabrane stavke i kao parametre uzima jednu ili dvije funkcije koje su obavljene tijekom pokretanja ovog događaja. Druga značajka je opcionalan i obavlja kad je miš napustiti područje našeg elementa. Pokušao to uvesti kod tako da su obje funkcije su transparentni čitatelju, ali preporučujem smanjuje kod u postojećim projektima.
Pogledajmo sada analizu koda unutar funkcije. Opet, ovdje ćemo koristiti za odabir, ovaj put smo se odnose na temu u kojem živimo. Svaki vraća jQuery izbornik, koji se može riješiti po ovoj klauzuli. Ali ako želite unutar elementa se odnose na stavke unutar stavke, koristiti Nađi metodu, koja pronalazi i vraća sve odgovarajuće elemente. Imajte to na umu, jer ako želite da se odnosi na pojedinu stavku, te će koristiti takve klase, a nakon žalbe. Pronađi (". ClassNazwa"). Naravno, unutar pronaći, što također može odnositi na više komplicirana struktura elemenata, kao i jQuery selektora.
Prvi dugometražni kao što možete vidjeti, mijenjati pronaći način vraća objekt i promijeniti svoju transparentnost, a zatim koristite metodu slideToggle (), pokreće se animacija, u ovom slučaju, to je animacija, "spušta" na dnu, koji određuje parametar postavljen za prikaz nitko u postavkama element (element je nevidljiva, tako da slajd jedina stvar može učiniti je da se to pokazati).
U drugom značajku, sve izgleda vrlo slično, osim da mi više ne treba mijenjati neprozirnost, jer je već promijenila. Uspjeli smo na jQuery, uključujući jer je u css, ne bi bilo moguće, na takav način da bi se postigla potpuna usklađenost s W3C valjanosti, te da transparentnost je ispravno prikazan u svim modernim preglednicima koji podržavaju JavaScript.
4. Rezime
Svrha ovog članka, je učenje kako napraviti animirane izbornike, ali, upoznavanje mnogo zanimljivih pitanja koja se odnose način pronaći (), kao i jQuery. Mogućnosti su ogromne, i nadam se da nakon čitanja ovog članka, ona će dobiti nekoliko entuzijasta.
Dok je učinak našeg rada, možemo vidjeti demonstraciju .
Vrlo lijep članak - vrlo korisna metoda opisana jQuery, i vrlo praktičan primjer. Sve je čisto i ugodno, ja sam na čekanju za sljedećih umjetnika