jQuery: löytää ()
jQuery on suuri JavaScript puitteet. Jos et ole ollut tilaisuus työskennellä hänen kanssaan, toivon, että seuraava julkaisu, kannustaa voit hyödyntää tätä tiettyä ratkaisua. Koska se on ominaista nopeus, optimoimalla koodia mukautumaan hänelle niin monta selaimissa kuin hyvin, mikä luultavasti monet kiinnostavimmista - helppo rakentaa monimutkaisia ratkaisuja.
Nykypäivän artikkelissa keskitytään erittäin käyttökelpoinen menetelmä löytää ().
Jos et ole ollut tekemisissä Tässä yhteydessä kehotan teitä tutustumaan perusteet valitsimista käyttämällä virallisia API on selectorów , tai valmistetut by Bartosz Medonia jQuery peruskurssi . Tämä tieto helpottaa suuresti ymmärtämistä ratkaisujen tässä esitetyt.
Paras Mennään konkreettisia esimerkki tästä menetelmästä. Useimmilla sivuilla, yksi peruselementit valikot. Yritämme luoda omia animoituja valikko vähimmäismäärä komponentteja ja jotka toimivat kaikilla selaimilla, joka tukee JavaScriptiä.
Ensimmäinen Valmistaminen elementtien
Aloitetaan luomalla tyhjän HTML-dokumenttiin:
<! DOCTYPE html JULKINEN "- / / 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>
Sitten ota uusin versio jQuery peräisin virallisella sivustolla projektin (tuotanto) ja kopioi se kansioon HTML-tiedostoja.
Tässä asiakirjassa, voisi käyttää jonkin näytteen sisältöä, ja meidän menu. Käytetään tämän div-ja span-elementtien. Tietenkin kohteita meidän valikossa pitäisi olla yhteyksiä, mikä asettaa ne lohkossa. Koko laittaa sisälle lohko div kanssa id = menu. Lisätty tiedosto jQuery komentosarjatunnus. Koko tulisi näyttää jotakuinkin tältä:
<div id="menu"> <div> href # 1 Valikko </ a> <span> href # 1.1 Menu </ a> href # 1.2 Menu </ a> href # 1.3 Menu </ a> </ Span> </ Div> <div> href # 2 Valikko </ 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 valikko </ 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 valikko </ a> <span> href # 4,1 Menu </ a> href # 4,2 Menu </ a> </ Span> </ Div> </ Div> <! - End # menu -> On joitakin esimerkkejä sisällöstä. On joitakin esimerkkejä sisällöstä. On joitakin esimerkkejä sisällöstä. On joitakin esimerkkejä sisällöstä. On joitakin esimerkkejä sisällöstä. On joitakin esimerkkejä sisällöstä. On joitakin esimerkkejä sisällöstä. On joitakin esimerkkejä sisällöstä. On joitakin esimerkkejä sisällöstä. On joitakin esimerkkejä sisällöstä. <script type="text/javascript" src="jquery.js"> </ script>
Erityisesti laittaa useita kohteita valikossa näyttää, miten helppoa valittaa joista monet jQuery, riippuen siitä mikä lohko siirrymme hiirtä.
Toinen Määritä ulkonäkö valikossa (css)
Tässä osiossa määritellään ilme käytetään html-tiedostoon, koodi estää. Olen valmis itse, seuraava koodi tyyli, joka sijaitsee pääosa:
<style type="text/css"> <! - * {Margin: 0px, padding: 0px;} {text-decoration: none; font: 20px Georgia, "Times New Roman", Times, serif;} html, body {margin: 10px;} # Menu {top: 0px; float: left; width: 100%;} Div # menu {kanta: suhteellinen, float: left;} Div # menu: aktiivinen, div # menu: link, div # menu: visited {display: block; kanta: suhteellinen, vertical-align: middle background: # CCC; color: # fff; padding: 5px 10px; width: 150px;} Div # menu: hover {background: # 999;} Div # menu span {display: none; position: absolute, top: 100%; vasen: 0, float: none;} Div div # menu: aktiivinen, # menu div div: link, div # menu span: visited {kanta: suhteellinen, display: block; float: left; top: 0px background: # ddd; color: # fff; padding: 5px 10px; width: 150px;} Div div # menu: hover {background: # 999;} -> </ Div>
Tässä esimerkissä luomme vain yksinkertaisen kahden tason valikko, mutta mikään tapa muuttaa niitä ja sopii kaikkiin monella tasolla.
Jos emme tässä vaiheessa, sinun pitäisi viitata myös mahdollisuuksia luoda css'owego valikosta .
Kolmas Kynsien Ohjelman - löytää.
Kun tällaisia toimenpiteitä, olemme valmiit toteuttamaan koko sivun JavaScript-koodia. Tiedämme myös, kuten edellä, sanoo valitsin. Meidän tapauksessa esimerkki on varsin yksinkertainen, sillä on vain neljä päävalikossa, mutta se ei ole vaikea kuvitella, että voi olla enemmän, ja jokainen voi olla useita oksat. Tämä disqualifies silmukan menetelmä, myöskään kuulu brute-force, Tutkittuaan kaikki tapaukset erikseen. Mutta kiitos löytää menetelmä, ongelma kiteytyy yhteen selväksi Koodirivin jotka suorittavat koko työn meille. On hyvä, että JavaScript-koodia oli $ (document). Ready varmistaa tarkoitamme sitä, kun sivu latautuu, kaikki ulkoiset skriptejä, tyylejä ja muita tiedostoja.
<script type="text/javascript"> <! - / / <! [CDATA [ $ (Document). Ready (function () { $ ("Div # menu"). Hover ( function () { $ (Tämä). Etsi ("span"). Css ({opacity: 0,98}). SlideToggle ("nopea"); } function () { $ (Tämä). Etsi ("span"). SlideToggle ("nopea"); } ); }); / /]]> -> </ Script>
Ylläoleva suosittelen laittaa komentosarjatunnus, jota kutsumme jQuery, pohjaan.
Pääasiassa valitsin, katso tag id = "menu", jonka sisällä on div. Menetelmä. Hover (), tarkoittaa tapahtumaa hyökätä hiiri, valitun kohteen ja parametrit on yksi tai kaksi tehtävää, jotka suoritetaan aikana aloittamisen tämän tapahtuman. Toinen ominaisuus on valinnainen ja se suoritetaan, kun hiiri jättää alueen meidän elementin. Yritti esitellä koodia niin, että molemmat toiminnot ovat läpinäkyviä lukijalle, mutta suosittelen minimoi koodin oleviin hankkeisiin.
Olkaamme nyt analysoimaan koodin sisälle toimintoa. Jälleen täällä käytämme valitsin tällä kertaa puhumme aiheesta, josta elämme. Jokainen palauttaa jQuery valitsin, joka voidaan käsitellä tätä lauseketta. Mutta jos haluat elementin, katso kohteen sisällä kohteen, käytä Etsi menetelmää, joka löytää ja palauttaa kaikki vastaavat elementit. Pidä tämä mielessä, koska jos haluat viitata tietyn kohteen, voit käyttää tällaista luokkaa, ja sen jälkeen valitus. Etsi (". ClassNazwa"). Tietenkin sisällä löytää, saatamme myös viitata monimutkaisempi rakenne elementtejä, sekä jQuery valitsimia.
Ensimmäinen ominaisuus kuten huomaatte, muokata löytää metodi palauttaa objektin ja muuttaa sen avoimuutta, käytä menetelmää slideToggle (), on pantava vireille animaatio, tässä tapauksessa on animaatio, "laskeutuvan" pohjalle, joka määrittää parametrit näyttämään yhtään asetusten elementin (elementti on näkymätön, niin työnnä ainoa asia voit tehdä, on näyttää sitä).
Toisessa ominaisuus, kaikki näyttää hyvin samanlaisia, paitsi että meidän ei enää tarvitse muuttaa peittävyyttä, koska se on jo muuttunut. Teimme sen jQuery, mukaan lukien koska css, ei ole mahdollista, siten, että saavutetaan täysin W3C validaattori, ja että avoimuus oli näy oikein kaikilla moderneilla selaimilla, jotka tukevat JavaScript.
Neljäs Yhteenveto
Tämän artikkelin, se opitaan luoda animoituja valikoita, mutta tutustuminen monia mielenkiintoisia kysymyksiä, jotka koskevat menetelmää etsiä (), sekä jQuery. Mahdollisuudet ovat valtavat, ja toivon, että kun luet tämän artikkelin, se saa muutamia harrastajia.
Vaikka vaikutusta työmme, voimme nähdä esittelyn .
Very nice artikkeli - erittäin hyödyllinen menetelmällä jQuery, ja ihan käytännön esimerkki. Kaikki selkeä ja miellyttävä, odotan seuraavaa taiteilijoiden