Ipad linja ruudulla selattaessa

iPad ja yhden sormen vieritys in flexmls

Nick on 13 huhtikuu 2011

Tänään viesti on Nick Larson, yksi FBS: n web-kehitys harjoittelijoita joka tehtävänä oli tehdä iPad yhteensopiva flexmls. Hän keskustelee tekniset yksityiskohdat alla miten hän toteutettu vieritys iPadin sisällä flexmls.

-Greg Kilwein

iPad: Single Finger IFrame vieritys

Kun aloitimme testaamalla iPad yhteensopivuuden flexmls, yksi suuri ongelma oli se, että vieritys ei toimi monia keskeisiä paikkoja flexmls. Oletuksena iPad ei ainoastaan ​​rullata div vaativat kaksi sormea ​​sijasta yhdellä sormella, mutta iframeja eivät pysty vierittää lainkaan. Tavoitteena oli tarjota yhden sormen vieritys mahdollisuuksien.

Onneksi iPad antaa meille hienoja rakennettu kosketusnäyttö tapahtumiin, joita voimme käyttää päästä alkuun ongelman ratkaisemiseksi. Käyttämällä pari tapahtumia, erityisesti touchstart ja touchmove. pystymme luomaan yksinkertainen toiminto, joka voi huolehtia alustetaan yhden sormen vieritys tahansa div tai muu rullata elementti syrjään iframeja (me puhumme iframes myöhemmin). Hyvä uutinen on, että tämä on melko rajat selain yhteensopiva, vaikkapa vain kosketus tukevissa selaimissa. Testasin sitä pari mobiiliselaimissa, ja se jopa tuntuu toimivan Internet Explorer Windows Phone 7! Joten kiitos tulossa koko muutamia hyödyllisiä resursseja, en keksi:

Mitä Alkuun ajattelin piti olla valtava projekti, oli lopulta helppo korjata ansiosta rakennettu kosketustapahtumat ja vähän tutkimusta.

Nyt kovan osassa iframes. flexmls vetoaa iframe näyttää paljon sisältöä nähtävissä koko järjestelmän. Ongelma iPad on, että se ei pelata mukavaa kehyksiä lainkaan.

Jostain syystä iPad ei noudata niiden korkeus arvoa. Sen sijaan, että halutulle korkeudelle ja mahdollistaa vieritys, iPad vain ojentaa iframe pystysuunnassa sijoittaa kaikki sisältö. Minusta tuntuu tämä voisi olla vika iPad, tai jotain niitä ei ennakoida. Joko niin, tarvitsimme korjata.

Heti Ajattelin vain kääre div sen ympärille ja käyttää sitä div rullata. Kuitenkin, se ei toimi. Ongelma tässä on, kun initMobileScroll toiminto sovelletaan iframe ja yrittää vierittää, iframe vain kaappaa kosketustapahtumat sijasta div. No, kun joidenkin mielestä pystyin kanssa kahdella tavalla.

Ensimmäinen menetelmä, "versio 1", edellyttää saattamisesta ehdottoman sijoitettu div päälle iframe niin kosketus tapahtumia pysyä yhteydessä samaan ikkunaan ja ei jää kiinni, joita iframe. Ainoa ongelma tässä menetelmässä on, että se tekee kaiken iframe unclickable (kuten linkit). Tämä vaihtoehto näyttää tältä:

No se kunnollinen vaihtoehto, mutta mitä jos käyttäjien täytyy pystyä klikkaa asioita iframe? Toinen menetelmä, "versio 2", käsitellään tätä asiaa. Vaikka se vaatii kehystetyn sisällön sijaita samalla toimialueella kuin vanhemman asiakirjan, se varmasti toimii.

Mitä voimme tehdä, on vain pitää iframe piilossa ja käyttää "innerHTML" ominaisuus vetää sisältöä ulos iframe kun se on ladattu. Voimme aseta sisällön div, ja soveltaa mobiili selaa div sijaan iframe.

Tämä menetelmä voisi näyttää seuraavasti:

Se on aika paljon se. Juuri kun sisällön piilotettu iframe ja heittää sen div, joka käyttäytyy paljon paremmin iPad. Nyt joka kerta iframe lähde muutetaan, div automaattisesti lataa uuden sisällön! On tärkeää huomata, että innerHTML toimii vain sisältöä iframe isännöidään samalla toimialueella. Jos se ei ole, selain estää yritys.

Ipad linja ruudulla selattaessa

Toivottavasti tämä antaa jonkinlaisen käsityksen siitä, miten suorittaa rullata iPad.

Laajentaminen iframeja ei ole virhe. Uskon vieritys = "no" ei poista se, mutta en ole varma, jos voit sitten voi vierittää sisältöä JS.

Mutta tämä on hyvä hyvä alku minulle. Kiitos

Nick 20 kesäkuu 2011 klo 07:46

Kiitos! Voisit aina kokeilla lisätä kerrointa touchMovedY ja touchMovedX. En ole varma, jos se tuntuu luonnollinen tai ei selattaessa, mutta se olisi kokeilemisen arvoista.

Uskon olen puuttuu jotain täällä.

Tarvitsin iFrame isäntä minun tärkein sisältöä iPad (ja kaikki muut "suuren näytön) johtuu" liukuva-sisältö "sivulla muuttuu yhteinen iPhone - slide sisään oikealta samanaikaisesti liukuu vasemmalle esim. Tässä tapauksessa "div" tag ei ​​piilottaa liukuvan sisällön täysin osoittaa sekä saapuvien ja lähtevien sivuja, vierekkäin, koska ne liukuvat paikoilleen. Ei hyvä tarkastella.

Joten menin takaisin vanhan iFrame malli, perin kehitetty flash overlay HTML sisältö esitetään. IFrame "naamiot jäljempänä liukuva sisältö näytetään vain yhden sivun näkymän tarkoitettu. Nämä sisältösivuja on suunniteltu kiinteän ylä- ja alatunniste sisäpuolella ylä- ja alareunassa iFrame näyttö ja "div" tag kanssa vieritettävän sisällön välillä - minun tarkka halutun tarkoituksen.

Tämä Scroller on yhden sormen vieritettäviä, sisältö on valittavissa ja sivu on pyyhkäisy-pystyy samoin.

Joten pidän yllä post hieman hämmentävä. Minulle 'div' tag ei ​​/ ei ollut toimiva ratkaisu. Mutta iFrame on täydellinen ja se toimii hienosti minun rajoitettu testaus. (Huom: Minulla on melko vähän enemmän javascript kuin yllä.)

Nick 07 syyskuu 2011 klo 10:45

Tämäpä kiintoisaa. Viime Katsoin, ihmiset käyneet ton ongelmia iframeja ja vieritys iPadiin. Ellei jokin uusien versioiden ios on sittemmin vahvistettu joitakin ongelmia. Siinä tapauksessa, mahtava! Vain tekee Google-haku "ipad iframeja 'täyttämiseen saat joitakin ongelmia Olen ollut tekemisissä.

michael 07 syyskuu 2011 klo 00:10

"On tärkeää huomata, että innerHTML toimii vain sisältöä iframe isännöidään samalla toimialueella. Jos se ei ole, selain estää yritys. "

ole varma, mitä tämä tarkoittaa - sisältö näkyy iFrame on asua samalla palvelimella kuin web-sivusto, jossa iframe näkyy? Jos näin on, se voittaa päätavoite lukien iFrameja in verkkosivuilla: kuten sisältöä ei isännöi siellä.

Kiitos selventää

Nick 07 syyskuu 2011 klo 10:29

Eli oikea, sisältö on oltava samalla palvelimella johtuen saman alkuperän käytännön (en.wikipedia / wiki / Same_origin_policy).

Meidän tapauksessamme me käytetään pääasiassa iframeja menneisyydessä erilaisia ​​piirteitä / elementtien / etc. sivun sijasta sisältöä toisesta verkkotunnuksesta. Wikipedian sivun iframe-elementin on melko hyvä selitys, miksi me aluksi päättivät käyttää niitä: en.wikipedia / wiki / HTML_element # Kehykset

Kuitenkin nyt, että on paljon parempi tuki XMLHTTP pyyntöjä (muodossa ajax), suurin osa (ellei kaikki) näissä tilanteissa olemme ajaa sisään voidaan välttää.

Hei kaikki. Unohdin tästä postitse, sorry.

Lisäksi käytän Cubiq n iScroll 4 nykyisin sisällön vieritys. Tämä mahdollistaa kiinteän ylä- ja alatunniste vierittäessäni sisältöä; periaatteessa kaikki mitä tarvitaan. Joka tapauksessa, tässä linkki riisuttu versio rullauspalkkia on katkaistut säiliöön (ei iFrame). Se on suunniteltu (teoksen prosessi juuri nyt) mitään - selaimet, ipad, iphone jne IPhone on liian pieni, jotta säiliön häviää.

Tämä käyttää jQuery kuin rajat selaimen koodin perusteella ja myös käyttivät JavaScriptMVC ohjain kuin "-widget" johtaja. On esimerkiksi painikkeet ja kaikki eivät toimi; se on rullauspalkkia demo ainoastaan. Rullaa toimii kuin unelma.

(Kulta teksti yläosassa on aktiivinen vianjäljityslokin.)

Will käyttö innerHTML toimii, jos jotkut sisältö luodaan dynaamisesti by javascriptit ja että tapahtumakäsittelijät myös dynaamisesti liitetty elementtejä?

Related viestiä

  • Normaali AppleCare suunnitelma ei kata vahingoilta, koska se seuraa yleistä takuuehtojen jotka kattavat normaalissa käytössä yleensä kuluminen on vain, jos se on sekä haittaavat normaali ...

  • Olettaen puhumme käyttökelpoinen iPad (ei vanhentunut) se on suhteellisen riippuvainen siitä, onko teillä AppleCare Plus kattavuus. AppleCare Plus tarjoaa jopa kaksi vahingoilta ...

  • Säröillä minun uusi iPad! Mitä teen? Tracilynnribble sanoi: Hei! Olen uusi sähköisessä maailmassa ja on iPad 3. Korkkasin iPadini sen ei särkynyt mutta tein jätä iso halkeama. Minun täytyy...

  • Joten yhteensopiva, ei halua laittaa sitä alas. Niin ohut ja kevyt, sinun ei tarvitse. Ei vain ohuempi näyttö. Kaunis näyttö. Massive teho. Vuonna vähäisenä. Jopa 10 tunnin akun Not ...

  • iPhone tai iPad ei lataudu? Näin voit korjata sen! Voi veloittaa iPhone- tai iPad? Tässä muutamia korjauksia voit kokeilla! Jos et voi lataa iPhone, iPad tai iPod touch, onko se ...


Warning: include_once(/home/admin/web/finnish.mobilesbuzz.com/public_html/ins/aftercontent.txt): failed to open stream: No such file or directory in /home/admin/web/finnish.mobilesbuzz.com/public_html/kun/ipad-linja-ruudulla-selattaessa.php on line 144

Warning: include_once(): Failed opening '/home/admin/web/finnish.mobilesbuzz.com/public_html/ins/aftercontent.txt' for inclusion (include_path='.:/usr/share/pear:/usr/share/php') in /home/admin/web/finnish.mobilesbuzz.com/public_html/kun/ipad-linja-ruudulla-selattaessa.php on line 144