jQuery: find ()
jQuery er en stor JavaScript rammer. Hvis du ikke har haft lejlighed til at arbejde sammen med ham, jeg håber, at følgende publikation, vil opfordre dig til at drage fordel af denne særlige løsning. Fordi det er karakteriseret ved hurtighed, optimere koden til at rumme ham i så mange browsere så godt, som sikkert mange af de mest interessante - let at bygge komplekse løsninger.
I dagens artikel vil fokusere på en meget nyttig metode finde ().
Hvis du ikke har beskæftiget sig med disse rammer, opfordrer jeg dig til at gøre dig bekendt med de grundlæggende principper for vælgerne, ved hjælp af officielle API'en på selectorów , eller udarbejdet af Bartosz Medonia jQuery grundlæggende kursus . Denne viden vil i høj grad lette forståelsen af de løsninger, der præsenteres heri.
Bedste lad os få nogle konkrete eksempel på denne metode. På de fleste sider. En af de grundlæggende elementer for en menu navigering Vi vil forsøge at skabe deres egen animerede menu med det minimale antal af komponenter og drift i henhold til hvilken som helst browser, der understøtter JavaScript.
Første Fremstillinq af elementer
Lad os starte med at oprette et tomt HTML-dokument:
<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> Menu </ title> </ Head> <body> </ Body> </ Html>
Så få fat i den nyeste version af jQuery fra det officielle site af projektet (produktion) og kopiere det til en mappe med vores HTML-filer.
Inden for dette dokument, bruge kunne nogle eksempler på indhold, og vores menu. Bruges til denne div og span-tags. Selvfølgelig, de punkter på vores menu skal være links, hvilket placerer dem i en blok. Hele puttes ind i blok div med id = menu. Tilføjet filen ved hjælp af jQuery script tag. En hel bør se noget som dette:
<div id="menu"> <div> href # 1 Menu </ a> <span> href # 1,1 Menu </ a> href # 1,2 Menu </ a> href # 1,3 Menu </ a> </ Span> </ Div> <div> href # 2 Menu </ a> <span> href # 2,1 Menu </ a> href # 2,2 Menu </ a> href # 2,3 Menu </ a> href # 2,4 Menu </ a> href # 2,5 Menu </ a> </ Span> </ Div> <div> href # 3 Menu </ a> <span> href # 3,1 Menu </ a> href # 3,2 Menu </ a> href # 3,3 Menu </ a> href # 3,4 Menu </ a> </ Span> </ Div> <div> href # 4 Menu </ a> <span> href # 4,1 Menu </ a> href # 4,2 Menu </ a> </ Span> </ Div> </ Div> <-! Slut # menu -> Der nogle eksempler på indholdet. Der nogle eksempler på indholdet. Der nogle eksempler på indholdet. Der nogle eksempler på indholdet. Der nogle eksempler på indholdet. Der nogle eksempler på indholdet. Der nogle eksempler på indholdet. Der nogle eksempler på indholdet. Der nogle eksempler på indholdet. Der nogle eksempler på indholdet. <script type="text/javascript" src="jquery.js"> </ script>
Specielt sætter mange ting på menuen for at vise, hvor nemt vil appellere til mange af dem fra jQuery, afhængigt af hvilken blok vi bevæger musen.
Andet Definer udseendet af menuen (CSS)
I dette afsnit definerer vi udseendet bruges i HTML-filen, kode blokke. Jeg forberedte mig, følgende kode til den stil, som ligger i hovedafsnittet:
<style type="text/css"> <! - * {Margin: 0px, padding: 0px;} A {text-decoration: none; font: 20px Georgien, "Times New Roman", Times, serif;} html, body {margin: 10px;} # Menu {top: 0px; float: left; bredde: 100%;} Div # menu {position: relative; float: left;} Div # menu a: aktiv, div # menu a: link, div # menu a: besøgte {display: block; position: relative; lodret-align: midten; baggrund: # CCC; color: # fff; padding: 5px 10px; bredde: 150px;} Div # menu a: hover {background: # 999;} Div # menu span {display: none; position: absolut, top: 100%; venstre: 0; float: none;} Div div # menu a: aktiv, # menu div div a: link, div # menu span a: besøgte {position: relative; display: block; float: venstre, top: 0px; baggrund: # DDD; color: # fff; padding: 5px 10px, bredde: 150px;} Div div # menu a: hover {background: # 999;} -> </ Style>
I vores eksempel, skaber vi kun simple to-niveau menu, men der er intet i vejen for at ændre dem og tilpasse til et vilkårligt antal niveauer.
Hvis vi er på dette punkt, bør du også henvise til de rammer, for at skabe css'owego menu .
Tredje Den søm af programmet - find.
Ved sådanne foranstaltninger, er vi parat til at gennemføre en fuld-side JavaScript-kode. Vi ved også, som nævnt, siger vælgeren. I vores tilfælde, er det eksempel ganske simpelt, da der kun er fire hovedmenuen, men det er ikke svært at forestille sig, at der kan være mere, og hver kan have flere grene. Dette diskvalificerer løkken metode, udelukker også en brute-force, at have gennemgået alle de sager, hver for sig. Men takket være at finde metoden, problemet kan koges ned til en meget klar linje kode, der udfører hele arbejdet for os. Det er godt, at vores JavaScript-kode var i $ (document). Ready, sikre, at vi henvise til det, når siden indlæses, alle eksterne scripts, stilarter og andre filer.
<script type="text/javascript"> <! - / / <! [CDATA [ $ (Document). Ready (function () { $ ("Div # menu"). Hover ( funktion () { . $ (Denne) Find ("span") CSS ({opacity: 0,98}) SlideToggle ("hurtig").. } funktion () { . $ (Denne) Find ("span") SlideToggle ("hurtig"). } ); }); / /]]> -> </ Script>
Ovenstående kode vil jeg anbefale at sætte script tag, som vi henviser til jQuery, på bunden.
Som hovedregel vælgeren, henvises til tag id = "menu", inden for hvilke der er en div. Metode. Hover (), betyder en begivenhed invadere musen, det valgte element og som parametre, én eller to funktioner, der udføres under indledningen af denne begivenhed tager. Den anden funktion er valgfri og udføres, når musen forlader område af vores element. Forsøgt at indføre koden, så begge funktioner er gennemskuelige for læseren, men jeg anbefaler at minimere koden i eksisterende projekter.
Lad os nu analysere koden inde i funktionen. Igen, her bruger vi vælgeren, denne gang henviser vi til emnet, hvor vi bor. Hver returnerer et jQuery selector, som kan løses ved denne klausul. Men hvis du vil have inde i elementet, henvises til punktet inde i et element, skal du bruge Find metoden, der finder og returnerer alle matchende elementer. Hold dette i tankerne, for hvis du ønsker at henvise til et bestemt element, skal du bruge sådan en klasse, og efter appellen. Find (". ClassNazwa"). Selvfølgelig inde i finde kan vi henvise til en mere kompliceret struktur elementer, såvel som jQuery vælgere.
Den første funktion, som du kan se, ændre finde metoden returnerer et objekt og ændre dens gennemsigtighed, og derefter bruge den metode, slideToggle (), skal indledes animation, i dette tilfælde, er det animation, "ned" til bunden, der bestemmer den parameter indstillet til at vise Ingen i indstillingerne for et element (et element er usynlig, så skub den eneste kan gøre, er at vise det).
I den anden funktion, ser alting meget ens, bortset fra at vi ikke længere behøver at ændre opacitet, da det allerede er blevet ændret. Vi gjorde det på jQuery, herunder fordi css, ville ikke være muligt, på en sådan måde, at der opnås fuld overensstemmelse med W3C validator, og at åbenhed blev vist korrekt i alle moderne browsere, der understøtter JavaScript.
4. Oversigt
Formålet med denne artikel, var det at lære at skabe animerede menuer, men, at kende mange interessante spørgsmål vedrørende metoden kan finde (), såvel som jQuery. Mulighederne er enorme, og jeg håber, at efter at have læst denne artikel, vil det få nogle få entusiaster.
Mens effekten af vores arbejde, kan vi se demonstrationen .
Meget fin artikel - meget nyttig metode beskrevet jQuery, og ganske praktisk eksempel. Alle klar og behagelig, jeg venter på de næste kunstnere