Kuten minkä tahansa uuden tekniikan, aloitus on usein vaikein osa.

Tämän turhautumisen myötä olemme koonneet joitain käteviä vinkkejä, temppuja ja koodinpätkiä, jotka liittyvät jQuery Mobile -kirjasto .

Koska tämä ei ole täydellinen alusta kirjaston käyttämistä varten, me ohitat joitakin asioista, jotka tulevat melko ilmeisiksi, kun aloitat, ja saavat sen sijaan suoraan kohteet, jotka tulevat melko turhauttaviksi tai ongelmallisiksi.

Muista myös kertoa meille kommentit, jotka katkokset löytyvät hyödyllisiltä ja kaikista muista, joista tiedät, jotka voivat olla hyödyllisiä.

1. Täysi perussivu

Minusta tuntuu, että koko sivukartoitus tarvitsee perus-sivua uudestaan ​​ja uudestaan. Sellaisena tässä on kaikki koodi, jonka on perustettava yksi yksinkertainen sivu.

Header
Content goes here
Footer

2. Jos haluat lisätä perinteisiä jQuery-puheluita

Kun aloitin tämän mahtavan laajennuksen käyttämisen jQueryn kanssa, huomasin heti, että haluaisin muokata sivuja asioita ennen kuin mobiililaajennus käynnistettiin.

Kuten käy ilmi, suositeltu ratkaisu on yksinkertaisesti laittaa perinteiset jQuery-puhelut ennen mobiilin laajennuksen lataamista. Näin jQuery-komentoilla on mahdollisuus suorittaa ennen kirjaston lataamista. Tässä on seuraava malli:

3. Poista AJAX-navigointi käytöstä kaikkien linkkien kerralla

AJAX-navigointia on mahtavaa, on olemassa aikoja, jolloin haluat vain poistaa sen käytöstä. Käytä tätä bittistä jQueryä kertoaksesi mobiilikirjastolle, ettet käytä AJAX-navigointiasi.

Aseta se viittauksen jälkeen jQuery-mobiilikirjastoon sivun otsikossa. Toisin sanoen kirjasto on jo ladattava, ennen kuin tätä koodia viitataan.

4. Lopeta keskeisten kohteiden katkaiseminen

Yksi kirjaston ominaisuus (tai virhe, riippuen tarpeista riippuen) on, että se älykkäästi katkaisee pitkän kohteen UI-elementteihin sopiviksi.

Olen löytänyt kaksi tapausta, joissa tämä voi olla ärsyttävää. Ensinnäkin luettelokohteissa, joissa haluan nähdä koko tekstin. Ja toiseksi alatunnisteen tekstissä. Näyttää siltä, ​​että sinulla on muutakin kuin vain muutama merkki, siellä alkaa puhua "...". Käytä tätä yksinkertaista CSS ohittaa molemmat näistä oletusarvoista.

Luetteloelementeistä:

body .ui-li .ui-li-desc {white-space: normal;}

Alatunnisteen sisällön osalta:

body .ui-footer .ui-title {white-space: normal;}

5. Käytä mediakyselyitä kohdelaitteisiin

Yksi ensimmäisistä kysymyksistä, joita minulla oli tällä kirjastolla, oli kohdistaa laitteita CSS: ään (näytön koon mukaan). Haluan esimerkiksi kahden sarakkeen layoutin iPadille ja yhden sarakkeen älypuhelimille. Paras tapa saavuttaa tämä on mediakyselyissä.

Joitakin yksinkertaisia ​​mediakyselyitä varten voit nopeasti luoda CSS-kohdesekoituskoot. Tämäntyyppisen kohdistuksen avulla voimme nopeasti luoda erilaiset ulkoasut saatavilla olevan näytötilan perusteella käyttämällä perinteisiä CSS-tekniikoita.

Kaksi upeaa resurssia tähän ovat:

• ” CSS-mediakyselyt ja saatavilla olevan tilan käyttö , "CSS-Tricks;
• Hardboiled CSS3-mediakyselyt ," Pötyä.

6. Kohdeympäristöt jQueryn kanssa

Niin kauan kuin voimme haluta suorittaa tiettyjä CSS-laitteita tietyille laitteille, voimme myös haluta käyttää jQueryä vain tietyissä laitteissa. Tässä on muunnelma jotkut koodi Snipplr joka sallii minun helposti jakaa jQuery-osia helposti käyttäjän laitteesta riippuen.

 var deviceAgent = navigator.userAgent.toLowerCase();var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);if(agentID.indexOf("iphone")>=0){alert("iphone");}if(agentID.indexOf("ipod")>=0){alert("ipod");}if(agentID.indexOf("ipad")>=0){alert("ipad");}if(agentID.indexOf("android")>=0){alert("android");}

7. Käytä täydellisiä polkuja lomakkeen toiminto-attribuuttien kohteille

Yksi kirjaston huijaus näyttää olevan vaikea löytää kohdesivuja lähettämään lomakkeita ... eli jos et käytä koko polkua sivuston juuresta.

Olen esimerkiksi havainnut, että tämä lomakekoodi ei koskaan löydä kohdetta:

Täysi polku toimii kuten odotettiin:

Varmista myös, että lomakekäsittelijän tulokset tuottavat täydellisen, pätevän jQuery-mobiilisivun, kuten vinkki # 1 näkyy.

8. Luo ponnahdusikkunoita

Yksi kätevä kirjaston ominaisuus on sen sisäänrakennettu ponnahdusikkuna tai valintaikkunan ominaisuus. Tämän kätevä ominaisuus on kuollut yksinkertainen. Käytä lähinnä attribuutin linkitykseen seuraavasti: data-rel="dialog" .

Huomaa kaksi asiaa. Ensinnäkin kohdesivun on oltava täynnä jQuery-mobiilisivu, joka on kuvattu kärjessä # 1. Toiseksi tämä toimii vain ulkoisille sivuille. sen on oltava täysin erillinen sivu toimimaan oikein.

9. "Peruuta" + "Tallenna" -painike

Tämä bittinen koodi sopii kahteen perustarpeeseen. Ensimmäinen on, että niissä on kaksi painiketta vierekkäin. Onneksi kirjastossa on sisäänrakennettu sarakerakenne, joka voidaan helposti työstää käyttämällä kentän tunnistetta ja asianmukaisia ​​luokkia, kuten jäljempänä näkyy. Toinen on kaksi painikkeita eri teemoilla. Tämä koodi on suoraan asiakirjoista , ja pitää sen kätevästi usein.

Cancel
Submit

10. Luo sarake rakenne omasta

Minun pyrkimyksessani rakentaa yhdelle sivulle optimaalisesti useita laitteita löysin itseni yhdistelemällä yllä olevat median kyselysanat edellä "sarakkeet missä tahansa järjestyksessä" -tekniikassa.

Onneksi web-kehittäjät ajattelivat kauan sitten, miten siirtää sarakkeita ympäri. Yhdistämällä tämä tekniikka median kyselyihin voimme helposti luoda erilaisia ​​rakenteita riippuen näytöksestä, jonka kanssa olemme tekemisissä.

Paikka on kaikki on yksi helpoimmista järjestelmistä.

johtopäätös

JQueryn mobiilikirjasto on räjähdys, johon on tarkoitus työskennellä. Se tuottaa upeita tuloksia hyvin vähän vaivaa. Ja koska se on edelleen alfassa, se on loistava alku. Toivottavasti nämä nopeat vinkit vievät sinut eteenpäin, kun kaivaat tätä uutta kirjastoa.

Kirjoittanut yksinomaan WDD Patrick McNeil. Hän on freelance-kirjailija, kehittäjä ja suunnittelija. Erityisesti hän rakastaa kirjoittaa web-suunnittelusta, kouluttaa ihmisiä web-kehityksestä ja rakentaa verkkosivustoja. Patrickin uusin kirjaprojekti on Suunnittimen verkkokäsikirja ; oppia muita hänen kirjoistaan TheWebDesignersIdeaBook.com . Seuraa Patrickia Twitterissä @designmeltdown .

Mitä mieltä olet jQuery Mobile -kehyksestä? Mitä hyödyllisiä koodikappaleita olet löytänyt hyödylliseksi?