Hai să facem o listă cu ceea ce vrem să „învețe“ interactiv pagina noastra web.
- Redimensionarea bloc a containerelor care fac proiectarea de pagini web interactive, astfel încât acestea să preia întreaga zonă de client a ferestrei bazate pe Web.
- Schimbarea culorii cadrului la bara de navigare de puncte atunci când cursorul mouse-ului pe ele.
- Sari de pe pagina web atunci când utilizatorul face clic oriunde pe elementul corespunzător din bara de navigare nu este neapărat exact pe hyperlink.
- Ascunde și dezvăluie liste imbricate, formează o bandă de navigare, atunci când faceți clic pe lista de elemente „externe“, în care sunt încorporate.
- Alocați benzile de navigație punctul corespunzător pagina interaktivnoyWeb deschisă în prezent.
- Punerea în aplicare exemple sub acoperire și evidente de text pe paginile web dedicate tag-uri individuale și atributele de stil, atunci când faceți clic pe titlul „Exemplu“.
Destul de mult, nu-i așa? Dar biblioteca Ext Core ne va ajuta să facem totul cu un minim de cod.
dimensiuni bloc de control al containerelor
Și primul lucru pe care o facem - pentru a forța containerele bloc pe interactive noastre paginile web redimensionate astfel încât să se ocupe toată zona de client a ferestrelor bazate pe Web și nu merg dincolo de ea.
În primul rând, deschide stilurile de calcul tabelar main.css și pentru a găsi în ea o etichetă stil suprascriere
. Schimbați-l așa cum se arată în Listarea 16.1.Am adăugat preaplinul atributul stil cu o valoare ascunsă, eliminând, astfel, la toate pagina interaktivnoyWeb defilare. Nu avem nevoie de mai mult de a apărea la momentul nepotrivit, acestea pot interfera cu amplasarea containerelor bloc.
Salvați foaia de stil. deschide imediat main.js. fișier Web-scripting La început, chiar înainte de a apela onready obiectul Ext, introduceți codul din listingul 16.2.
La sfârșitul corpului funcției, pe care le trece ca un parametru la metoda onready obiectului Ext, introduceți cele două expresii:
Salvați fișierul main.js. Deschideți index.htm pagina de Web în browser-ul Web - și imediat act de faptul că containerele bloc au luat astfel de dimensiuni pentru a ocupa intreaga zona de client a ferestrei bazate pe Web. Să încercăm să redimensiona fereastra și priviți ca dimensiunile în schimbare ale containerelor.
Dar cum funcționează? Acum vom înțelege.
Codul am adăugat în fișierul main.js declară adjustContainers funcția pe care de tratare a evenimentelor va redimensiona fereastra Web-based. Este această funcție va seta dimensiunea containerelor. Să ne uităm la linia de cod de linie.
În primul rând, vom obține lățimea și înălțimea zonei client Web Bazat fereastra:
var clientWidth = Ext.lib.Dom.getViewportWidth ();
var clientHeight = Ext.lib.Dom.getViewportHeight ();
La aceste valori ne vom referi mai mult decât o dată, deci este mai bine pentru a le menține în variabile. La urma urmei, accesul la variabila este mult mai rapid decât apelarea metodei.
Aceste valori, de asemenea, vor fi necesare în viitor.
Apoi, setați lățimea containerului cheader egală cu lățimea zonei client Web Bazat fereastra:
Se calculează înălțimea cnavbar cmain și containere:
Anterior, stabilește o valoare obținută ca înălțimea și containerele cmain cnavbar:
Specifică lățimea containerului cmain:
Ext.get ( "cmain") setWidth (clientWidth - cNavbarWidth - 10) .;
Valoarea sa este obținută prin scăderea lățimii containerului lățimea cnavbar zona client și alte 10 pixeli - amploarea amprentei externe între ele (acesta este stabilit într-un stil numit marjă-dreapta stil atribut navbar).
În această funcție adjustContainers de execuție sa încheiat.
Acum, ia în considerare cele două expresii sunt plasate în corpul funcției, care este parametrul de metoda onready Ext obiectului.
AdjustContainers funcția cravată ca un handler pentru Web Bazat eveniment redimensionare a ferestrei:
Și, de îndată ce este numit pentru a face containerele de dimensiuni potrivite, imediat după încărcarea pagina web:
Asta e tot despre crearea de pagini web interactive. Sunt de acord - nimic complicat.