Oldalnavigáció a billentyűzet segítségével
Ma megmutatom, hogyan kell hozzá speciális billentyűzet segítségével navigálhat a menüben jQuery.
Nézze meg a demót, és hogyan működik. Bemutatja egy egyszerű menüt, amely választ ad a nyíl billentyűk „fel” és „le”, valamint az «Enter» gomb kattintson a linkre.

Ebből része a HTML-kódot, hogy megértsék, nem nehéz. Egy egyszerű rendezetlen lista, és az id attribútum a div tag.
Azonban vegye figyelembe a nevét a menüből, hogy meghatározza az azonosító - ez még mindig szükség van.
Ez a lecke nem szinte semmit CSS - CSS-összes funkció nagyon egyszerű, és nem tartalmaznak olyan érdekes pontot tartalmaz, amit okozni baj. Mindazonáltal érdemes odafigyelni egyik CSS osztályok:
Most van itt az ideje, hogy foglalkozik a jQuery kódot. Először is, meg kell rögzíteni az aktuálisan kiválasztott menüpont, beleértve egy linket, ahol ő irányítja a felhasználót, úgy, hogy az elején a script állítja két változó:
Nyomja meg a nyilakat „fel” és „le” aktivál (még nem létező) függvény eligazodni, ami által meghatározott egyetlen paramétert. Lássuk, mi folyik a függvény belsejében.
A függvény első használatával itemhover osztály ellenőrzi, hogy van már kiválasztott elemeket. Ha ezt nem teszik, currentSelection funkció beállítása 1 (0 - ez az első elem a listán).
Elején működés, a felhasználó a gombot csak nyíl lefelé vezető (felfelé mutató nyíl, amíg nem számít). Amikor elkészült, kattintson a gombra „lefelé nyíl”, az első script ellenőrzi, hogy a kiválasztott elem az utolsó a listán (ez kiderült ellenőrzi a méret). Ha nem, akkor currentSelection függvény értéke 1-el nő.
Eljárás a gomb „felfelé nyíl” közel azonos. Amikor megnyomja, a funkció rájön, hogy ez nem az, hogy az aktuális elem az első listában (0).
Az utolsó, indítunk egy másik jellemzője az úgynevezett setSelected. Ő csak egy paraméter - a szám a kiválasztott menüpontot. A funkció kicsi, de nagyon fontos.
Az első sor minden osztályban költözött itemhover listán. A második sorban, minden osztály adunk a kiválasztott menüpont (függvény paraméter). Ez az osztály, amit teremtett előtt segítségével CSS, emlékszel? Az utolsó sor beállítja a paramétert CURRENTURL, kitermelésére index href a kiválasztott menüpontot. Telepítése után CURRENTURL gomb Enter (vagy vissza) is kezd dolgozni!
Most van egy csodálatos menü által vezérelt megnyomásával felfelé, lefelé, és az Enter. De mi a helyzet az egér vezérlésére?
Egérvezérlés lehet szervezni nagyon egyszerűen - hozzá a CSS fájlban: hover, és minden esetben. Ebben az esetben, ha a felhasználó mozgatja a mutatót a menüpont, az elem lesz kiemelve. De mi van, ha a felhasználó úgy dönt, hogy összekapcsolják a két lehetőség hajózás? Ezután, ha a kurzor a harmadik pont, és ebben az időben van nyomva a gomb ki lesz emelve az első bekezdésben.
Tevékenységét koordinálja a két navigációs opciók, van valami, hogy adjunk a forgatókönyvet. Először is, meg kell rendelni az egyes elemeket az index menüben. Ez nagyon egyszerű, de ez szükséges a megfelelő működését a program. Amikor a felhasználó mozgatja a kurzort a harmadik menüpontot, maga a fogalom nincs pont, hogy ő a harmadik a sorban. De amikor hozzá egy számozott menüpont lesz okosabb:
Mint látható, ez a része a script működik, mint ez: megtekintését minden menük érdekében, és hozzárendeli az egyes elemeket a sorszám (szám). Ez az információ hasznos lehet, ha a kurzor.
Most adjuk hozzá a menüpont az olvasás a kurzor pozícióját:
Az első paraméter légpárnás - olyan funkció, amely akkor aktiválódik, ha az egérrel egy menüpont. Ismét, currentSelection beállíthatók egy megfelelő olvasási sorszámot. Így a script „tudja”, hogy mi szükség van az elem kijelöléséhez, és most, miután kattintva az egérrel, akkor használja a nyilakkal!
A második függvény semmi figyelemre méltó - ez egyszerűen eltávolítja az összes itemhover osztályok a menüből, és visszaállítja CURRENTURL.
Nos, ez minden! A technika leírt a cikkben, nagy mértékben növeli a funkcionalitást a webhelyen. Sietek tájékoztatni arról, hogy az IE és a korábbi verziók, akkor nem tud navigálni a menük a billentyűzet segítségével.

Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!


Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!

Ha már megtanulta a HTML és tovább szeretne lépni, a következő lépés az lesz, hogy tanulmányozza a CSS technológiával.

Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!