Magic-HTML Client reunat - Osa 4 Johdanto Tämä on neljäs ja viimeinen osa minun sarja, magic HTML Client reunat. Tässä osa sarjasta annan sinulle täydellisen koodi hankkeen. Olemme myös lopuksi ottaa joitakin hyödyllisiä kommentteja. Loppupuolella tämän osan, annan sinulle (linkki) koko koodi hankkeen Zip-muodossa. Koodi ja sen toiminta minä annan sinulle koodin, koska se löytyy zip-tiedosto ylhäältä alas. Jälleen puhun lyhyesti vuonna selitys koska sinun olisi pitänyt nähdä paljon se bitteinä. Aloitamme globaalien muuttujien, joita käytetään monissa osissa koodin.
Nämä muuttujat ovat: var reuna = ""; var paneBack = true; var leftPaneShown = false; var topPaneShown = false; Nämä muuttujat liittyvät joidenkin teknisten vaatimusten näimme kolmannessa osassa sarjassa. Kun ruudussa (sisempi DIV) ovat vierineet vasemmasta reunasta tulee sivu, tämä reuna muuttuja annetaan arvo "left". Kun ruudussa ovat vierineet ylhäältä, alas sivua, muuttuja annetaan arvo, "top". Kun ruudussa on vielä reuna tai on mennyt takaisin reunaan, muuttuja, paneBack käytetään osoittamaan Joten arvon tosi. Nyt, kun valitset BODY elementin ruudun pitäisi vierittää pois (reunaan).
Kun valitset ruudussa, koska ruudussa on edessä BODY elementin, kehon välillisesti saa napsautuksella. Et halua ruudun vierittää takaisin, kun ruumis ei ole napsautetaan suoraan. Seuraavat kaksi muuttujaa edellä käytetään tähän. Ensimmäinen (leftPaneShown) on ruudun vasemmasta reunasta. Toinen (topPaneShown) on ruudun yläreunasta. Koodi Shift Oikea ja vasen Tässä puhun koodi vastaa näyttämällä ulompi DIV ja siirtämällä sisempi DIV oikealle ja vasemmalle. Olen myös puhua koodisegmentti joka poistaa ruudun sivulta.
Käytetyt muuttujat Tässä kohdassa ovat: var x; var TR; var TL; var processOnL = false; Muuttuja, x on x-koordinaatti pikselin. Muuttuja, TR on palannut tunnuksen setInterval () toimintoa siirtämällä ruudusta oikeaan. Muuttuja, TL on palannut ID setInterval () toimintoa siirtämällä ruudussa vasemmalle. Prosessissa siirtymässä ruudun oikealle tai vasemmalle, suunta ei voi peruuttaa ennen kuin liike on valmis. Muuttuja, processOnL käytetään tähän. Se asetetaan aluksi vääriä; sen oletusarvo on väärä. DoShiftRight () Toiminta doShiftRight () funktio valmistelee sivun siirtyä ruudusta oikeaan.
Tämä on toiminto: toiminto doShiftRight () {jos ((processOnL == false) && (paneBack == true)) {processOnL = true; paneBack = false; document.getElementById (Calc "). style.left =" -205px "; X = document.getElementById (Calc). style.left; X = ParseInt (x); //Päälle ruudun document.getElementById (jatkuu). Style.top = "25%"; //Näyttää ulompi DIV document.getElementById (jatkuu). Style.display = "block"; TR = self.
setInterval ("shiftRight ()", 10); }} Lausunnot sisällä doShiftRight () toiminto vain suoritetaan, kun ruudussa (sisempi DIV elementti) ei ole liikkeessä, ja kun se on sisällä vasemman reunan (tai on mennyt takaisin reuna). Testi, jos edellytys huolehtii tämän. Ensimmäinen toteamus jos lohkon asettaa muuttujan, processOnL tosi, mikä tarkoittaa, että ruudussa on liikkeessä tai alkaa liikkua. Seuraava lausuma asettaa muuttujan, paneBack epätosi, eli ruudussa ei ole enää reuna. Muista, että hankkeessa, CSS tyyliattribuutti on ylä- ja lähti arvot ulomman DIV kuin 0px.
Joten kun web-sivu on juuri avattu, ulompi DIV: n sijoitus on sivun vasemman alkuun asiakas alue. Sen näyttö omaisuutta tuolloin on "ei mitään", joten se ei ole nähnyt, eikä vie tilaa; sillä ei ole vaikutusta elementtejä, jotka olisivat sen takana. Seuraava toteamus toiminto antaa sisempi DIV vasemmalla arvo -205px. Tämä syrjäyttää sisempi DIV osaksi matkia reunaan. Se on siirtynyt sieltä. Tämä on johdonmukaisuuden varmistaa, että siirtyminen alkaa oikeaan asentoon. Seuraava raportti tuo alkuun ulomman DIV elementin ja kaikki sen sisältö 25% etäinen alas asiakas alue.
Sisempi DIV on siirtynyt vaakasuunnassa ulomman DIV elementti tuossa asemassa. Tahansa asennossa annat ulomman DIV, sisempi DIV ottaa myös se, että se on ulomman DIV. Arvo asemaa omaisuutta sisäinen DIV on "suhteellinen". Tämän, muuttamalla arvot vasemman ja ylin ominaisuuksia sisemmän DIV, siirrät sen ulomman DIV. Seuraava raportti näyttää ulompi DIV. Sen jälkeen meidän koodi, kun ulompi DIV näkyy, sisempi DIV näkyy myös. Viimeinen toteamus toiminto on tuttu (edelliseltä osista sarja). ShiftRight () -toiminto Tämä toiminto; se on tuttu. Aion vain selittää lisätty lausuntoja.
toiminto shiftRight () {document.getElementById (Calc). style.left = x; //Lopeta vieritys oikealle, jos (x>
1 ja…