Selles õppetundis peame akende objekti omadusi, millega saate brauseri akna tööpiirkonna suurust (sisevees ja seesisesises), akna suurust ise (ülerõhk ja väline), selle asukoht võrreldes kasutaja ekraani ülemises vasakus nurgas (Screenleft ja Screentant) ja positsioonide kerimine (PageXFFSET ja pagetyoffset).
Sisemine ja sisemine
Need on mõeldud brauseri nähtava tööruumi akna suuruste saamiseks. Need. Sisevee- ja sisekõige omadused on mõeldud selle piirkonna laiuse ja kõrguse saamiseks, kus HTML-dokument kuvatakse. Need omadused loetakse ainult pikslites ja tagastamisväärtusi.
Näiteks Hankige brauseri nähtava tööruumi akna kõrgus ja laius:
Nähtava vaatepordi laius (Widthcontenarea):
Nähtava vaateppordi laius (kõrgusecontenarea):
Outerwidth ja OuterEight Omadused
Need on loodud selleks, et saada kogu brauseri akna suurust, st Sealhulgas tööriistaribad, kerimisriba, olekuriba, akna piire jne. Outerwidth ja OuterEight Omadused loetakse ainult ja tagastati akna laiuse ja kõrguse pikslites.
Näiteks hankige brauseri akna kõrgus ja laius:
Brauseri Windowsi laius (Widthwindow):
Brauseri akna kõrgus (heighwindow):
Omadused Screenleft (Screenx) ja Screentant (Screeny)
Nende eesmärk on saada brauseri akna vasaku ülemise nurga koordinaadid või dokumendi kasutaja ekraani ülemises vasakus nurgas.
Sel juhul töötavad Internet Exploreris Screenleft ja Screentop omadused ja Mozilia Firefoxi ekraani ja Screeny omadused. Chrome'i, Safari brauserites ja teiste sarnaste brauserite puhul võib kasutada nii screenleft kui ka Screentant ja Screenxi ja Screeny omaduste omadused.
Kui kasutate neid omadusi, on vaja arvesse võtta asjaolu, et mõned brauserid võivad dokumendi vasaku ülemise nurga koordinaadi tagasi saata ja mõned brauserid koordineerivad akna ülemises vasakus nurgas. Screenleft Properties (Screenx) ja ScreenDont (Screeny) on ainult lugemis- ja tagastanud kaugväärtused võrreldes vasak nurga horisontaalselt ja vertikaalselt pikslites.
Näiteks tühistage koordinaadi X-i ja praeguse brauseri akna vasakusse nurgas (dokumendi) vasakult nurgas ekraani ülemise vasaku nurgaga:
Uuri välja koordinaadid
PageXoffset Atribuudid (Scrollx) ja pagetyoffset (Scrollx)
Nende eesmärk on saada mitmeid pikslit, millele dokument keritakse horisontaalselt (PAGNEFFSET) või vertikaalse (pagatyffset) suunas akna suhtelise ülemise vasakus nurgas. Omadused Scrollxi ja kerimised on ekvivalendid vastavalt Pagexoffset ja pagatyoffset'i omadustele. Neid omadusi loetakse ainult.
Näiteks, et kuvada pikslite arv, millele dokument keritakse horisontaalselt (Pagexoffset) ja vertikaalseks (pagatyoffset) suunas.
Õpi kerimisriba positsioone
Tere! Selle õppetunni teema jätkamisel kaalume sellist küsimust veebilehe kerimise ja brauseri suurusega manipuleerimiseks. Kuidas leida brauseri laius? Kuidas kerida JavaScripti veebilehe kaudu? Vastused nendele küsimustele Ma arvan, et leiad selles õppetundis.
Laius / kõrgus nähtava osa brauseri akna
Elemendi kliendiliit / kõrguse omadused on lihtsalt nähtava akna piirkonna laiuse / kõrgus.
Mitte aken.Verwidth / kõrgus
Tuleb märkida, et kõik brauserid, välja arvatud IE8, võivad toetada ka akende omadusi.Verwidth / Innerheight. Nad salvestavad praeguse akna suuruse.
Mis vahe on? Te küsite. See on kindlasti väike, kuid äärmiselt oluline.
Klientide soovitus / kõrgus omadused, kui on kerimisriba, tagastage see laiuse / kõrgus selle sees, ligipääsetav kogu dokumendile ja aken.Nerwidth / kõrgus - ignoreerib selle kohalolekut.
Kui lehe parempoolne pool võtab kerimisriba, eemaldavad need jooned erinevad:
Hoiatus (aken.innerwidth); // Kogu täielik märguande akende laius (Document.docelement.Clientwidth); // laius vähem kerimine
Tavaliselt oleme huvitatud ainult kättesaadava aknalaiusest, näiteks joonistamiseks midagi, mis on miinus kerimisriba. Seetõttu kasutatakse DoCumellement.Clientwidth sageli.
Veebilehe laiuse / kõrgus, võttes arvesse kerimist
Jah, teoreetiliselt, lehe nähtav osa on dokumentaalfluendid
See kehtib kõigi tavaliste esemete kohta.
Kuid nende omadustega lehekülje jaoks võib tekkida probleem, kui kerimine on seal, siis ei ole see. Sellisel juhul töötavad nad valesti. Pean ütlema, et Chrome / Safari ja Opera brauserites, puudumisel kerimisriba, väärtuse dokumentaalfirma.ScrollE-i sel juhul võib isegi olla väiksem kui dokumentaalne
See probleem võib esineda konkreetselt dokumentatsiooniks.
Kuid lehekülje suurus on võimalik usaldusväärselt kindlaks määrata, võttes arvesse kerimist, võttes lihtsalt maksimaalselt need mitu omadust:
Var scrollvisota \u003d matemaatika Alert ("Kõrgus, võttes arvesse kerimist:" + Scrollvisota);
Praeguse kerimise hankimine
Kui tavalisel elemendil on praegune kerimine scrorlift / scrolltop.
Aga lehekülg?
Fakt on see, et enamik brausereid töötleb dokumentatsiooni õigesti.Scrolllelli / ülemise päringu aga Safari / Chrome / Opera on vead, sest sa peaksid kasutama dokumenti.
Noh, selleks, et selle probleemi täielikuks ümbersõitmiseks kasutada, saate kasutada akende omadusi.Pagexoffset / pagetyoffset:
Alert ("Praegune kerimine ülevalt:" + aken.pageyoffset); Alert ("Voolu kerimine vasakul:" + aken.pagexoffset);
Need kõik omadused:
- IE8 ei toetata.
- Nad võivad neid lugeda ainult, kuid see on võimatu muuta.
Kui IE8 ei ole mures, siis kasutame neid omadusi lihtsalt.
Cross-brauseri versioon IE8-ga annab võimaluse dokumentaalsusele:
Var scrollltop \u003d aken.pageyoffset || Document.documellement.Scrolltop; Alert ("Praegune kerimine:" + Scrolltop);
Kerige muutmise leht: Scrollto, Scrollby, Scrollirtoview
Lehekülje leidmiseks JavaScripti abil peab see kõik elemendid olema täielikult laaditud.
Scrolltop / Scrorlift'i tavapäraste elementide kohta saate põhimõtteliselt muuta ja samal ajal kerida.
Keegi ei häiri teid samal viisil ja lehel. Kõikides brauserites lisaks Chrome / Safari / Opera, saate kerida lihtne paigaldusdokument.documellement.Scrolltop ja määratud - sa peaksid kasutama dokumendi.body.scrolltop selle jaoks. Ja kõik töötab suurepäraselt.
Aga seal on teine, universaalne lahendus - spetsiaalsed kerimismeetodid lehe aknas.Scrollby (x, y) ja aken.Scrollto (Pagec, Paget).
- Scrollby (X, Y) meetod kerida läbi oma praeguse koordinaadid.
- Scrollto (PageX, Pagenchi) meetod keristab lehekülje määratud koordinaadid võrreldes kogu dokumendi. See on samaväärne ScrollLill / Scrollpoti omaduste paigaldamisega. Dokumendi algusse kerimiseks saate määrata koordinaadid (0,0).
scrolliRindoview.
Elem.Scrolllintoview meetodit (ülemine) tuleb kutsuda elemendil ja keritab lehekülge nii, et element on ülemine, kui ülemine parameeter on tõene ja allosas, kui ülemine on vale. Veelgi enam, kui seda tippparameeter ei ole täpsustatud, on see tõelisega võrdne.
Keelamise kerige
On olukordi, kui on vaja teha dokumenti "mitte-purustamata". Näiteks, kui suur dialoogiboks kuvatakse dokumendi kohal, nii et külastaja saab selle akna läbi kerida, kuid mitte dokumenti ise.
Selleks, et keelata lehe kerimise, siis piisab dokumendi esitamiseks.body.body.Style.overflow \u003d "peidetud" vara.
Dokumendi asemel võib olla ükskõik milline element, mille kerimine peab olema keelatud.
Kuid selle meetodi puudus on see, et kerimisriba kaob ise. Kui ta hõivatud laiusega, siis nüüd see laius vabastatakse ja lehe sisu laiendatakse, teksti "hüpata", võttes kõik vaba koha.
TULEMUSED
- Et saada suurusi nähtava osa akna, kasutab vara: Document.documellement.Clientwidth / kõrgus
- Arvesse võttes arvesse kerimisriba suurust: var scrollhEight \u003d matemaatika , Document.documedlement .ClientEight);
Saitide liideste arendamisel peate kasutama JavaScripti. Muidugi see on halb, kuid mõnes olukorras on lihtsalt võimatu rakendada kõike täiesti CSS.
Kõige vangistatavam vajadus minu jaoks on määrata brauseri akna laiuse või kõrguse määramisel edasiste manipulatsioonide jaoks. Selle teema kohta lõigatud kogu teabe all.
Kus see on mugav?
Ma ei räägi kõigile, kuid mul on muljet avaldanud TextPattern "igasuguste galeriid, liugurid jne, kus kõik on kirjutatud puhtaks JS. Asjad, mis on tihedalt seotud JS-ga, on haruldased, kuid siiski kohtuvad, nii et see märk ilmus.
Teil on võimalik määratleda 2 viisi: JS või JQuery.
Laiuse või kõrguse määramine puhta JS abil
See on kõige eelistatavam viis, kuna JavaScripti mootoril on peaaegu iga kaasaegne brauser. Isegi mobiilsed brauserid õppisid JS-ga töötama.
Muidugi on olemas võimalus, et kasutajat käideldaks js töötlemise väljalülitamiseks brauseris, kuid mulle tundub, et sellised "kummalised inimesed" ei ole nii palju, sest peaaegu iga sait kasutab JS-is töötavad lahendusi.
JS-is, et määrata ekraani suurusedSa pead kasutama funktsioone:
Screen.width // ekraani laius ekraan.Haight // ekraani kõrgus
Siin on mõttetu näide kasutamisest:
Kui te kasutate seda leheküljel asuvate üksuste asetamiseks, siis parim lahendus ei kasutata ekraani suurust, vaid brauseri akna suurused. JS-s seda tehakse sellisena:
Document.body.body.Clientwidth // brauseri laius dokument.body.Clientheight // brauseri kõrgus
Seega on siin mõttetu näide kasutamisest:
Brauseri suuruse määratlus jquery abil
Isiklikult kasutan allpool kirjeldatud meetodit. See meetod töötab ainult siis, kui olete varem ühendanud Jquery raamatukogu kohapeal. Kõigil saitidel, mida ma pean tegema selle raamatukogu, on tavaline DE / INFACT.
Kasutada meie JQuery ülesande jaoks, peate kasutama koodi:
$ (Aken) .width (); // brauseri laius $ (aken) .Kõik (); // brauseri kõrgus
Ja lõpus tahaksin öelda, et kui see on võimalik teha ilma JS ja JQuery üldiselt või osaliselt, siis on vaja tegutseda.
Sotsiaalseks rääkimiseks. Võrgustikud
Mis see on vajalik? Näiteks on meil kohapeal ilus paigutus, mis kõik selle ilu eksponeerib ainult lahendamisel, näiteks 1600 1200 kohta. Näiteks on tal väga suur ilus müts. Mis juhtub, kui inimene läheb saidile 1024-768 resolutsioonis? Jah, ainult müts on nähtav. Ei ole hea? Võib-olla. Siis miks mitte teha sellist asja, et kui brauseri kõrgus / ekraan, müts lihtsalt katkestaks ja läks menüüsse ja ülejäänud saidile? Mis on vaja.
Tegelikult kirjeldasin ma ühte näidetest, mida ma praktikas tekkis (vt Cartiginka). Lahendas probleemi lihtsalt - Via JavaScript. Ja võib-olla läbi jquery, ma ei mäleta. Kirjeldan siin mõlemat meetodit.
Esiteks on vaja määratlust eristada " ekraani resolutsioon"Ja" brauseri akna suurus"(Kuna mõnes artiklis esines intsidente - rail üksi meetodeid, pakuti neid teisi, kuigi ühel juhul mõõdan ma brauseri resolutsiooni teises - monitori resolutsiooni).
On vaja kindlaks teha algusest peale, et see on teie jaoks olulisem. Sellisel juhul on CAP-i näite puhul keskendunud ekraani eraldusvõimele (monitor): kõik sama, sait on ilus, kui brauseri aken käsitsi vähendatakse, siis laske brauseril alustada selle saidi vaatamisel (midagi sööma umbes.). Aga näiteks, et reguleerida laiendatud pildi Jquery Lightbox Galerii, kasutasin brauseri laius ja kõrgus.
Ja pärast valimist kirjutage kood, saate saidi päises. Esiteks, mis on suunatud ekraani resolutsioon.
3-6 rida - puhas JavaScript, 7-11 rida - näide jquery'st. JavaScripti meetodeid kasutatakse laiuse ja kõrguse määramiseks. Laius ja ekraan.Eight meetodid. Mis read on tehtud, selge: esimene skript näeb ette tee valikuline CSS-faili ja teine \u200b\u200b- kogu identifikaatori ploki jaoks, CSS "taustpositsioon" vara asub.
Me vaatame teist näidet, kuid mis keskendub brauseri resolutsioonile. Kõik sama, meetodid on muutunud.
Niisiis, kahest näitest, lühike ülevaade - mida kasutada, mis:
- ekraan. Määrab ekraanilaiuse (monitori).
- ekraan. Määrab ekraani kõrguse (monitori).
- document.body.Clientwidth.. Määrab brauseri laiuse.
- document.body.ClientEightEight. Määrab brauseri kõrguse.
- $ (Aken) .width (). Määrab brauseri laiuse, kuid ainult siis, kui teil on jquery.
- $ (Aken) .Kõik (). Määrab brauseri kõrgus, kuid ainult siis, kui teil on jquery.
On selge, et kui kasutate JQuery, on eelistatav kuni 5 võimalust kui 3 ja 6, mitte 4 - nad on lühemad. Noh ja nii - maitse ja värv.
JQuery ekraanide spetsiifiliste kõrguse ja laiused, siis ei tea ma neid. Teoreetiliselt peaks tüüp 5-6 ridade disain olema, kuid kuidagi ei ole see praktikas kohanud, ma annan mulle, nad ei ole. Jah, ja pole vaja, ekraan.Width on lühikese disaini, see on piisav.
Jah, on ikka veel $ (dokument) .width () - määrab HTML-dokumendi laiuse. Kasutage praktikas - kuidagi kaheldav. Kes teab - ma olen rõõmus, kui jagate.
Täna kõik! Hoia kuni nädalavahetusel ja massiliselt minna kebabidele! (Kui te ei ole haige midagi mõned - ca.). Edu!
