Hozzon létre egy plug-in jquery ui
Az órán jQuery UI egy egyszerű bővítmény jön létre, ami növeli a kép nevét. plug-in funkció nagyon egyszerű, és tudjuk összpontosítani, hogy mit kell szervezni jQuery UI plug-in, időveszteség nélkül a kódolást. jQuery UI ismerete hasznos lehet, de nem lesz jelentős hatással a sikeres lezárása a leckét.
Be kell másolni a jQuery, még egy pár fájlt a jQuery UI (szükség változat jQuery UI 1.8). Hozzon létre egy működő könyvtár valahol a számítógépen, és hívják jqueryui-plugin. akkor hozza létre a css mappában. js és img (felhasznált képek a bemutató megtalálható az archívumban forráskód).
Bibilioteka letöltése és csomagolja ki. Mi csak kell egy pár fájlokat az archívumból, és imennoo jquery-1.4.1.js. jquery.ui.core.js és jquery.ui.widget.js. Hogy ezeket a fájlokat a js mappát a munka könyvtárba. Akkor is szükség van valamilyen téma a jelenlegi stabil verzió a jQuery UI (használt lecke ui-könnyedséggel).
Mi teszi a widget nevét, ezért kell egy oldal egy sor képek a fejlesztési és testitrovaniya plugin. Kód tesztoldal:
Minden nagyon egyszerű. Csak három kép elhelyezni az oldalon. Ezt követi a négy fájl szkripteket. Három kapcsolat az eredeti jQuery és jQuery UI fájlokat, és a negyedik a beépülő modul. jquery.ui.core.js fájl szükséges widgeteket / jQuery UI dugó. jquery.ui.widget.js fájl lehetővé teszi, hogy teljes értékű kütyü, amelyek közös alkalmassága API. A legtöbb könyvtári elemek igényelnek isolzovaniya ezt a fájlt, akkor is használni, hogy hozzon létre a beépülő modul.
Hozzon létre egy plug-in fájl
Minden kód, ami a beépülő modul betokozódnak anonim fuunktsiyu. jQuery objektum adódik ez a funkció, és azt használják belsőleg alias $. Ez biztosítja a kompatibilitást a jQuery noConflict () módszer. Ez meghatározott követelményeknek, és végre kell hajtania.
Ezután meg kell határoznia a dugó. Adjuk hozzá a következő kódot a névtelen függvényt:
Sablon használatához egy widget gyár nagyon egyszerű. Hívjuk a widget () metódust. nevének feltüntetésével a plug-in, mint az első érv. A objektum tartalmazza a tulajdonságok és módszerek, hogy működnek bővítmény funkciót. Ez a megközelítés lehetővé teszi számunkra, hogy hívja a plugin (és hozzon létre), az általános szintaxis jQuery $ ( „element_k_ kotoromu_primenyaetsya_plagin”). Captionator (), valamint az egyéb módszerek jQuery vagy jQuery UI.
Gyári widget egy sor módszerek és tulajdonságait. Például, tudjuk meg néhány lehetőséget a plug-in segítségével az ingatlan lehetőségeket. Vagy adjon egy kiindulási végrehajtandó feladatot automatikusan a widget gyári, amint egy példányát a plugin hívják. Az objektum, amely a második érv az előző kódot be a következő sort:
Ez még csak a lehetőség, hogy használják a beépülő modul. bővítmény a felhasználó megadhatja a nevét a helyzet (felső vagy alsó) tekintetében a kép, a szöveg és a háttér színét nevét. Megváltoztatni az alapértelmezett beállításokat a fejlesztő használja a következő szintaxist a kódban.
Ezután létrehozunk egy inicializálási funkció:
Az eljárás neve legyen az aláhúzás az elején, mint a jQuery UI megakadályozza, hogy a hívás az ilyen módszerek egy plugin, hogy okozhat hirtelen megállás, ha hívja a HTML kódot az oldal.
A fő része a inicializálási eljárás - egy sor változó. A mi funkció ezt utal, hogy a tárgy, hogy át kell engedni a bővítmény példánymetódus. Az első változó hivatkozást tartalmaz az aktuális példányt a bővítmény. _create módszer az úgynevezett minden egyes elem (egy vagy több), amelyre a módszer az úgynevezett egy dugót.
Mi lehet az opciók eléréséhez alapértelmezés szerint a bővítmény (ami változik automatikusan, ha egy felhasználó telepíti némelyikük) lehetőségek használatával tulajdonság az objektum. Tartjuk azt a második változó. Az elem által, amelyre a bővítmény (captionator ()) eljárás kerül meghívásra lehet hozzáférni az elem tulajdonsága egy objektum. Tároljuk a harmadik változó.
Mi használjuk a negyedik változó tárolja utalás a neve az új elemet, amely úgy van felépítve egy egyszerű . innerText. tulajdonú . alt attribútum használ aktuális képet, és hozzáadunk néhány osztályok. Mi használja a nevét az osztály ui-widget. így tudja használni az alapértelmezett stílusok a jelenlegi jQuery UI témát. mi is ad neki egy felhasználói osztály nevét, és a számla is, hogy a telepítés a saját stílusát.
Ezután meg kell adnunk néhány tulajdonságait. Mi egy külön stíluslapot, de egyes beállítások, például a szín és a háttér színét vezérli beállítási lehetőséget, ezért kell telepíteni őket a plugin. A szélessége a nevének meg kell egyeznie a kép szélessége, amely átfedi. Tehát szükség van, hogy azonosítsa és használja a programot. Az új befejezése Ez egészül ki az oldalra után azonnal a kiválasztott képet.
Ha egy kép ki, meg kell változtatni a méretét, és helyezzük el. Legyen ez a művelet lehet pontosan, ha a kép már suschesvuet a DOM, és alkalmazott CSS szabályokat, mint a font-size. Ezért adjunk címet az oldalt, majd meghatározza a mérete, amely a tárolt változók és capWidth kapitális magasság.
Ha egy név adunk az oldal (és csak akkor, ha) tudunk létrehozni a megfelelő szélesség, magasság és helyzetét minden egyes cím, a CSS () módszerrel újra. A név valóban teljesen elkülönül a képet. Ez vstavletsya után azonnal minden kép, majd elhelyezni.
Minden csodálatos, de nem a böngésző ablak mérete megváltozik. Képek mozog, és nincs neve, mert abszolút helymeghatározás. A helyzet orvoslására, az általunk használt eseménykezelő izeneniya méret, csatlakozik az ablak, amely egyszerűen megváltoztatja a helyzetét az egyes cím szerinti helyzetét a képet. Ez az eseménykezelő az utolsó pont a mi inicializálási eljárás.
Egy másik módszer a beépülő modul - ez tönkre () metódust. amely közös minden jQuery UI plugin. Meg kell végrehajtani ezt a módszert, hogy tiszta használata után a beépülő modul. Példánkban a módszer nagyon egyszerű:
Minden, ami szükséges -, hogy távolítsa el a nevét és unbind eseménykezelőkkel változtatni az ablak méretét. Ez a módszer lehet hivatkozni a fejlesztő a plug-in, így a módszer nevét nem előzi aláhúzás. Hogy hívják ezt a módszert, a fejlesztő használja a bejegyzést $ ( "element_k_ kotoromu_primenyaetsya_plagin"). Captionator ( "tönkre").
Meg kell, hogy egy másik módszer, amely által ellenőrzött / widget gyárban. Options plugin telepítése idején ő hívja $ ( "element_k_ kotoromu_primenyaetsya_plagin"). Captionator ( "lehetőség", "hely", "top"). És a használata lehetőséget, hogy írjon _setOption módszer.
A neve ennek a módszernek van látva egy aláhúzás, a fejlesztő használja a lehetőséget. ehelyett _setOption valódi változást lehetőségeket. Nem kell bespopkoitsya hogyan obrabytyvaetsya, mi csupán a módszerrel, hogy szükség van a beépülő modul. Tehát ezt a módszert már létezik a modul gyár, meg kell hívni az eredeti módszer, amely készült előtt a kódot a Widget objektum prototípus. meghatározva a módszer neve is (ebben az esetben _setOption., de akkor is bármilyen más beépített módszer), és adja alkalmazni nevezni. Akkor majd végrehajtja a kódot a beépülő modul.
Funkció automatikusan két paramétert, ami változó, és az új érték az opciót. Fenntartjuk a közös elemeket, mint például a kép, és nevét, a jelenlegi magassága az egyes címek. Ezután egy egyszerű kifejezése switch-case, hogy kiemelje a három lehetőség a változásra.
add események
Fontos, hogy adjunk az esetben, ha egy fejlesztő használja a plugint tud kezelni, amikor a végfelhasználó jár a dugó semmilyen módon. Widget Factory kezeli a legtöbb ilyen feladatot számunkra. Minden, amire szüksége van -, hogy futtatni az eseményt. A plug-in van néhány funkció, de nem tudjuk futtatni egy esemény minden alkalommal egy nevet adunk az oldalt. Add hozzá a következő kódot közvetlenül az esemény előtt felvezető változtatni a méretét:
Styling bővítmény
A mi plug-in szükségünk van egy kis stíluslapot. Szó szerint, fel kell telepíteni három stílus. Létrehozunk egy új fájlt nevű ui.captionator.css. tárolja a css mappában. A csomag az alábbi kódot:
Most, a neveket kell kinéznie:
következtetés
Mint olyan módszer, amellyel jQuery fn.extend Plugins (). jQuery UI is saját mechanizmusa, amely lehetővé teszi a fejlesztők számára, hogy gyorsan és egyszerűen létrehozhat skálázható és nagy teljesítményű plug-inek, amelyek megfelelnek a legmagasabb elvárásoknak jQuery UI projekt. Widget Factory veszi nagy mennyiségű kemény munka, hogy hozzon létre egy plugin.
5 óra utolsó oszlopában „jQuery”
Ma szeretnénk, hogy meséljek TypeIt könyvtár - ingyenes jQuery plugin. Ön tudja használni, hogy szimulálja a gépelést. Ha minden megfelelően van beállítva, nagyon realisztikus hatás érhető el.
jQuery plugin létre egy idővonal.
jQuery plugin létre egy Gantt diagram.
Egy példa arra, hogyan hajtsák végre a letöltött fájl segítségével PHP és jQuery ajax.
\ Fuunktsiyu. \ Aha) És a tanulság leiratkozás ha végigolvassa
Miért olyan kerítés (ami minden mást teljesen más néz ki a különböző böngészőkben), ha ezt lehet tenni egy pár a DIV-ek + egy pár sort a css (krossbrouzerno)
Ez vsegolish bemutató írása plugint! Emberek, akik megtanulnak írni plug-inek, nem érdekel, hogy hány sort írhat nekik megérteni a szar
Hmm túl bonyolult szerkezet a két blokk, de a gyakorlatban is kiváló. Ha helyesen alkalmazzák az összes tanulságot itt leírt korábban, akkor lehet gyűjteni nem beteges dugó saját célra. Ezért írtam az én stúdióban plugin diavetítés. Most minden a kliensek sikoltozik örömében.
Paul, több időzónák a világon =)
Á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!