jQuery: hitta ()
jQuery är en stor JavaScript ram. Om du inte har haft tillfälle att arbeta med honom, hoppas jag att följande publikation, kommer att uppmuntra dig att dra nytta av denna lösning. Eftersom det präglas av snabbhet, optimera kod för att rymma honom i så många webbläsare och som nog många av de mest intressanta - lätt att bygga komplexa lösningar.
I dagens artikel kommer att fokusera på en mycket användbar metod att hitta ().
Om du inte har att göra med denna ram, uppmanar jag dig att bekanta dig med grunderna i väljarna, med hjälp av officiella API på selectorów , eller framställda genom Bartosz Medonia jQuery grunderna kursen . Denna kunskap kommer att kraftigt underlätta förståelsen av de lösningar som presenteras häri.
Bästa låt oss få några konkreta exempel på denna metod. På de flesta sidor, en av de grundläggande elementen för en meny navigering. Vi kommer att försöka skapa sin egen animerade menyn med minimalt antal komponenter och arbetar under alla webbläsare som stöder JavaScript.
Först Framställning av element
Låt oss börja med att skapa ett 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>
Sedan ta tag i senaste versionen av jQuery från den officiella sajten för projektet (produktion) och kopiera den till en mapp med våra HTML-filer.
I detta dokument, kan använda en del prov innehåll och vår meny. Används för denna div och taggar span. Naturligtvis objekt på vår meny, bör vara länkar, vilket ställer dem i ett block. Hela satte i ett kvarter div med id = meny. Lagt till filen med jQuery skripttagg. Helhet bör se ut ungefär så här:
<div id="menu"> <div> href # 1 Meny </ a> <span> href # 1,1 Menu </ a> href # 1,2 Menu </ a> href # 1,3 Menu </ a> </ Span> </ Div> <div> href # 2 Meny </ 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 Meny </ 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> <- End # menyn -> Det något prov innehåll. Det något prov innehåll. Det något prov innehåll. Det något prov innehåll. Det något prov innehåll. Det något prov innehåll. Det något prov innehåll. Det något prov innehåll. Det något prov innehåll. Det något prov innehåll. <script type="text/javascript" src="jquery.js"> </ script>
Speciellt lägger många objekt på menyn för att visa hur enkelt kommer att tilltala många av dem från jQuery, beroende på vilket block vi flytta musen.
Andra Definiera utseende menyn (css)
I detta avsnitt definierar vi utseendet som används i HTML-filen, kod block. Jag förberedde mig, följande kod till stil, belägen i huvudet avsnitt:
<style type="text/css"> <! - * {Margin: 0px, padding: 0px;} A {text-decoration: none; font: 20px Georgia, "Times New Roman", Times, serif;} html, body {margin: 10px;} # Meny {top: 0px; float: left; width: 100%;} Div # meny {position: relativ, float: left;} Div # meny a: aktiv, div # meny a: link, div # meny a: visited {display: block; position: relativ, vertikal-align: mitten; Bakgrund: # ccc; color: # fff; padding: 10px 5px; width: 150px;} Div # meny a: hover {background: # 999;} Div # meny span {display: none; position: absolut, top: 100%, till vänster: 0; float: none;} Div div # meny a: aktiv, # menyn div div en: länk, div # meny spänner över ett: besökt {position: relativ, display: block; float: left; top: 0px; Bakgrund: # ddd; color: # fff; padding: 10px 5px, bredd: 150px;} Div div # meny a: hover {background: # 999;} -> </ Style>
I vårt exempel skapar vi bara enkla två-nivå menyn, men det finns ingenting i vägen för att ändra dem och anpassa sig till valfritt antal nivåer.
Om vi vid denna tidpunkt, bör du också gå till ramverk för att skapa css'owego menyn .
Tredje Spiken i programmet - hitta.
Genom sådana åtgärder är vi beredda att genomföra en hel sida JavaScript-kod. Vi vet också, som nämnts, sade väljaren. I vårt fall är exemplet ganska enkelt, eftersom det bara finns fyra huvudmeny, men det är inte svårt att föreställa sig att det kan finnas mer, och var och en kan ha flera grenar. Detta diskvalificerar slingan metoden utesluter även en brute-force, efter att ha granskat alla fall separat. Men tack vare fyndet metod, problemområden handlar om att en mycket klar kodrad som kör hela jobbet för oss. Det är bra att vår JavaScript-kod var i $ (document). Ready se till att vi hänvisa till det när sidan laddas, alla externa skript, stilar och andra filer.
<script type="text/javascript"> <! - / / <! [CDATA [ $ (Document). Ready (function () { $ ("Div # meny"). Hover ( function () { . $ (Denna) HITTA ("span") Css ({opacitet: 0,98}) SlideToggle ("fast"),.. } function () { . $ (Denna) HITTA ("span") SlideToggle ("fast"). } ); }); / /]]> -> </ Script>
Koden ovan rekommenderar jag att sätta skripttagg, som vi kallar jQuery, på botten.
I huvudsak väljaren finns i taggen id = "meny", inuti vilken det finns en div. Metoden. Hover () innebär en händelse invadera musen, det markerade objektet och som parametrar, tar en eller två funktioner som utförs under inledandet av denna händelse. Den andra funktionen är frivillig och utförs när musen lämnar delen på vår element. Försökte införa koden så att båda funktionerna är transparenta för läsaren, men jag rekommenderar att minimera koden i befintliga projekt.
Låt oss nu analysera koden inuti funktionen. Återigen, här använder vi väljaren, den här gången hänvisar vi till ämnet som vi lever. Varje returnerar en jQuery väljare, vilket kan lösas genom denna klausul. Men om du vill inne i elementet, se artikel i ett objekt använder Sök-metoden, som hittar och returnerar alla matchande element. Ha detta i åtanke, för om du vill hänvisa till en särskild punkt, skulle du använda en sådan klass och efter överklagande. Sök (". ClassNazwa"). Naturligtvis inuti finna kan vi hänvisa även till en mer komplicerad struktur element, liksom de jQuery selektorer.
Den första funktionen som ni kan se, ändra fyndet metoden returnerar ett objekt och ändra dess transparens och använd sedan metoden slideToggle (), skall inledas animation i detta fall är det animation, "fallande" till botten, som bestämmer parametern inställd på att visa ingen i inställningarna för ett element (ett element är osynligt, så skjut det enda kan göra är att visa den).
I den andra funktionen, allt ser väldigt likt, förutom att vi inte längre behöver ändra opacitet, eftersom det redan har ändrats. Vi gjorde det på jQuery, inklusive eftersom css, inte skulle vara möjligt att på ett sådant sätt att uppnå full överensstämmelse med W3C validator, och att öppenheten visades korrekt på alla moderna webbläsare som stöder JavaScript.
4:e Sammanfattning
Syftet med denna artikel var det att lära sig att skapa animerade menyer, men att lära känna många intressanta frågor som rör metoden att hitta (), liksom jQuery. Möjligheterna är enorma, och jag hoppas att efter att ha läst den här artikeln kommer att vinna några entusiaster.
Medan effekten av vårt arbete kan vi se demonstrationen .
Mycket trevlig artikel - mycket användbar metod som beskrivs jQuery, och ganska praktiskt exempel. Alla tydlig och trevlig, jag väntar på nästa konstnärer