létrehozása plugins
Írja be az a művelet eredményét (számokban):
30-5 =? frissítés
Nem szereti 12
Nincs fordítás elérhető.
Ebben a cikkben megmutatom, hogyan kell írni egy egyszerű plugin jQuery, amely épít a szokásos HTML jelölőnyelv elég dinamikus menüt. Az első dolog, elkezdjük - meghatározni, hogy mi lesz, hogy a plug-in, és mi a célunk. Tehát:
Most melyik fájlokat kell létrehozni annak érdekében, hogy ellenőrizze a működését ebben a példában. Itt vannak:
1. dynamenu.html - fájlt a HTML-elrendezés a menüben. Ott is be kell építeni a oldalas forgatókönyvet, hogy hívja a beépülő modul
2. jquery.dynamenu.js - plug-in kód, egy külön fájlban.
3. dynamenu.css - stílusa menüben. Ez fel az egész CSS
Kezdjük el beírni a plugin. Menjünk!
1. Készítsünk egy HTML lap kódja
Kérünk egy nagyon egyszerű elrendezés a menüben. Legyen néhány menüpontok jövőnk site:
2. kérés CSS-stílusok
Stilizál Étlapunkon csupán két CSS-stílust. Segítségükkel tesszük a háttérben minden menüpont szürke menü szélessége 300 pixel, belső és külső margó 5 pixel, és minden menü linkek - fekete:
3. Az írás a „csontváz” bővítmény
Először is, mi határozza meg a keretét a beépülő modul. Ezt a keretet részben szerepel a hivatalos jQuery oldalon, és tartalmazza az úgynevezett „Best Practices” (legjobb gyakorlatok és technikák - a jQuery nyelvi fejlesztés). Általában egy ilyen keret alkalmazható szinte minden plugins jQuery. Ha emlékszik, és megérteni, hogyan működik ez a keret, akkor majd írni plug-inek a „egy-kettő”. Úgy néz ki, az alábbiak szerint:
Semmi bonyolult a keretben, mint látható, nem. De ő hordozza a hasznos információkat. Az első fontos dolog, amit meg kell érteni a keretben - mi összegyűjti a módszereket, amelyek beszállítási plugin (init, csúszó) egyetlen objektum - módszerekkel. Ez lehetővé teszi, hogy nem tömíti el a névtér $ .fn funkciók felesleges. Helyes azonosítását a tér a plug-in nevét - egy nagyon fontos része a folyamat kialakulásának plug-in is. Segítségével névtér biztosítja, hogy a bővítmény minimális valószínűsége felülírják más bővítmények vagy kódot, található, ugyanazon a HTML-oldal. A névtér is könnyebbé teszi az életet, mert Segít, hogy jobban kövesse a módszereket, eseményeket és adatokat.
Mindig eltitkolás módszerek a bővítmény, például az objektum módszerek. Emellett az a tény, hogy ez egy jó programozási stílus, ez a technika segít elkerülni az ütközést az egyéb harmadik fél könyvtárak és plug-inek, és nem tömíti el a jQuery névtér
A következő pont, amelyet meg kell figyelni - a tervező a beépülő modul. Ez a vonal a $ .fn.dynamenu = function (módszer). Mint látható, a kivitelező felvesz egy paramétert - módszer. Az értéket a paraméter átadjuk egy karakterlánc, amely tartalmazza a nevét, az eljárás a módszer az objektum fogunk hívni. Töltsük a kivitelező az alábbi kód:
Elemezzük, amit tettünk. Először is nézze meg, hogy van-e olyan módszer, a nevét át a kivitelező paraméter objektum módszerek a beépülő modul. Ha a módszer, hogy hívjuk az első módszer init - inicializálni a plug-in, majd hívja a módszer neve jut el a kivitelező paraméter és továbbadását a többi érveket. Ha ugyanaz a módszer, az azonos nevű ott, mi ad hibát, és a dugó nem működik.
Ebben a szakaszban sok minden történt! Már most tudjuk alkalmazni a beépülő modul, és hívja a módszerek, bár nem hasznos munkát, nem járnak. Azt javasoljuk, hogy a kódot a beépülő modul egy külön fájlba, és hívják jquery.dynamenu.js. Elhelyezése a plugin-kód egy külön fájlban egy logikus -, mert a beépülő legyen univerzális jellegűek, és nekünk, és más fejlesztők csatlakoztassa a késztermék formájában a webhelyen.
Most, hogy a keret tele van kód, amely okozhat belső bővítmény módszerek, itt az ideje, hogy létrejöjjön a „hús”, azaz írni a kódot, amely közvetlenül átalakítani a div-blokk egy szép dinamikus menüket. Folytassuk.
4. Az írás a kódot hozzon létre egy dinamikus menüt jQuery
Minden hasznos kódot a plug-in kerül a csúszó funkciójától, amely egy belső módszer plug-in található és az objektum módszerek. Nézzük röviden leírni a műveletsort átalakítja a statikus jelölés a mi div-blokkok dinamikus menüt jQuery:
- Először is, változtatni az összes div-blokkok az átláthatóságot ez 0,4 pont. Ez lehetővé teszi az egyes elemeket egy szürkés menüt. Aztán, amikor lebeg az egeret, akkor meg fogja változtatni a homály, hogy 1, ezáltal a hatása a kiemelt menüpont
- Ezután létre rakodók „bejáratánál”, hogy az egér és a menüpont a „kilépés” belőle. Amikor az egérrel egy menüpontot fogja változtatni a betűtípust, hogy merész és változtatni a háttér színe sötétebb. Továbbá, mi teszi a hatását „kihúzza” menü kissé jobbra a standard módszerrel jQuery eleven. Amikor elhagyja a területet az egér menüpont csak vissza minden beállítást az eredeti állapot.
Itt valójában minden logikát. Most lássuk, hogyan valósítható meg:
Mindenesetre, azt fogja magyarázni, hogy mi történik. Tehát, az első sorban látjuk a visszatérő this.each (function ()) operátor. Ez volt a következő: fut át a függvény készlet csúszó elemek (azaz minden a mi div-blokk), és végrehajtja a kódot helyezni. Ezt követően az elemek visszatérünk útvonal (return utasítást) a műveletek eredményeként az egyes szettek tétel megint, mint egy sor. Így a függvény egy sor csúszó div-blokkok továbbított „input” funkció, csak a hatása, és vált egy dinamikus menüt. Ennek megvalósítása jQuery fontos fogalom - a képesség, hogy a plug-in hívás láncban. Ahhoz, hogy jobban megértsük, mi a lánc hívások egy példát:
A fenti kódrészlet, azt látjuk, hogy ez a lánc a kihívás: először kiválasztjuk az összes elemet az osztály myelm oldalt, majd a beépülő modul dynamenu, majd vissza a lánc óta használják a standard jQuery css () metódus, hogy módosítsa a stílus elemeit. Ha még nem tért vissza a építési mód visszatér this.each (function ()). majd a módszert CSS () a „lánc” nem lett volna képes.
Felhasználási garancia this.each operátor () annak érdekében, hogy ez az elv érvényes a „lánc” a plug-inek, és azokat még sokoldalúbb.
Továbbhaladva, az üzemeltető belső each (), ahol fut végig a mi div-blokkok csak a kezdeti beállítási tulajdonságai „átláthatóság” (fedőképesség) tétel 0,4. pont. A maximális értéke opacitás - 1 (100%), így teszünk a „átláthatóság” 40%. Ezt követően, hogy két processzort „útmutatás” (hover) az egér és a „visszavonás” a mezei egér div-blokk. Az első felvezető mi meg a nevét, a menüpont félkövér és használja az élő () módszerrel elérni „teljes fényelnyelés” menüpontot, és a jobbra tolódása 5 pixel. A felvezető, „ellátás” egér már csak vissza az elem az eredeti állapotába - változtatni a font vissza a normális (normál), és a balra lép ismét 5 pixel.
Ez minden! A bővítmény használatra kész. Bár ő és egyszerű, de az is lehet hasznos, hogy hozzon létre egy dinamikus menüt a helyszínen. Alul van a szöveg - demonstrációja a beépülő modul. Hogy az eredmény a plugin, menj az eredmény fülre.