Létrehozása interaktív web-oldalakat, tömb konténerek
Csináljunk egy listát, hogy mit akarunk „tanítani” az interaktív web-oldal.
- Átméretezése blokk konténerek kialakítására a design interaktív web-oldalakat, így veszi fel a teljes kliens területe az ablakon web-alapú.
- Változtatni a színét a keret a pontig, amikor az egér mutatót rájuk.
- Ugrik a web-oldal, ha a felhasználó rákattint bárhol a megfelelő tétel a navigációs sáv nem feltétlenül pontosan a hivatkozást.
- Elrejtése és felfedi beágyazott listák, egy sávot alkot a navigáció, ha rákattint az elemre „külső” listát, amelyben azok vannak ágyazva.
- Kiosztani pont navigációs sávot, amely az aktuálisan megnyitott interaktivnoyWeb oldalon.
- Végre burkolt és nyílt példákat szöveg Web-oldalt szentelt az egyes címkék és attribútumok stílus, ha rákattint a „Példa” fejléc.
Elég sok, nem? De a könyvtár Ext Core segít bennünket, hogy tegyenek meg mindent a minimális kódot.
Vezérlőtömb méretű konténerek
És az első dolog, amit - kényszeríteni a blokk konténerek interaktív web-oldalak átméretezi úgy, hogy elfoglalják az egész kliens területe a web-alapú Windows és nem lépik túl azt.
Először nyissa meg a táblázatot main.css stílusok és megtalálja benne a stílus felülírás tag
. Változás, hogy a listán látható 16.1.Van hozzá a stílus attribútum túlfolyó rejtett érték, ezáltal megszüntetve minden interaktivnoyWeb görgetés. Nem kell többet megjelenő rossz időben, akkor zavarhatja a helyét blokk konténerek.
Mentse el a stíluslapot. Azonnal nyissa ki a web-scripting fájl main.js. A kezdet kezdetén, még mielőtt hívja onready az Ext tárgy, illessze be a kódot a lista 16.2.
Végén A függvény, amit át paraméterként a módszer onready az Ext objektumot, helyezze be a két kifejezést:
Mentsd el a fájlt main.js. Nyissa meg a web-oldal index.htm a Web-böngésző - és azonnal vegye figyelembe, hogy a blokk tartályokat tettek olyan méretű, hogy elfoglalja a teljes kliens területe az ablakon web-alapú. Próbáljuk átméretezni az ablakot, és nézni, ahogy a változó méretű konténerek.
De hogyan működik? Most meg fogjuk érteni.
A kód adtunk a main.js fájl kijelenti adjustContainers működni, hogy az eseménykezelő átméretezi az ablakot web-alapú. Ez az a funkció a méret a konténerek. Nézzük meg a kódot sorról sorra.
Először is, hogy a szélességét és magasságát a kliens területe az ablakon web-alapú:
var clientWidth = Ext.lib.Dom.getViewportWidth ();
var ClientHeight = Ext.lib.Dom.getViewportHeight ();
Ahhoz, hogy ezeket az értékeket fogunk hivatkozni többször, így jobb, hogy tartsa őket változókat. Végtére is, a hozzáférést a változó sokkal gyorsabb, mint amelyben az eljárás.
Ezek az értékek is szükség lesz a jövőben.
Ezután állítsa be az a tartály szélessége cheader szélességével egyenlő az ügyfél terület az ablak web-alapú:
Kiszámítjuk a magasságot cnavbar cmain és tartályokra
Korábban állít kapott értéket, mint a magasság és cnavbar cmain konténerek:
Meghatározza a tartály szélessége cmain:
Ext.get ( "cmain") setWidth (clientWidth - cNavbarWidth - 10) .;
Értékét kivonásával kapott szélessége az ügyfél terület szélessége cnavbar tartály és a másik 10 pixel - nagysága a külső bemélyedés között (ez meg egy elnevezett stílus attribútum Navbar stílus margin-right).
Ebben a végrehajtás adjustContainers funkció véget ért.
Most tekintsük a két kifejezés kerülnek a szervezetben a függvény, amely a paraméter a módszer onready Ext objektumot.
AdjustContainers nyakkendő funkcionálnak kezelőt az esemény Ablakátméretezés Web-alapú:
És amint azt nevezik, hogy a megfelelő méretű konténerek azonnal betöltése után a web-oldal:
Ennyit létre az interaktív web-oldalakat. Elfogadom - semmi bonyolult.