Mobiilisovelluksen suunnittelu / Dev Beginnerin opas jQuery Mobilelle

Viimeisten 2-3 vuoden aikana olemme nähneet mobiilien verkkosivustojen selaimen ja käyttöjärjestelmän tukemisen valtavan kasvun. Erityisesti Applen iOS ja Googlen Android-alustat tulevat mieleen. Mutta toiset, kuten PalmOS ja Blackberry, ovat edelleen sekoituksessa. Viime aikoihin asti oli hyvin vaikea sovittaa yhteen mobiiliteemaan kaikkiin näihin alustoihin.

JavaScript oli alku, mutta tähän mennessä ei ole ollut yhtään yhtäkään kirjastoa. jQuery Mobile ottaa kaikki jQueryn parhaat ominaisuudet ja siirtää ne mobiilisovellukseen. Kirjasto on enemmän kuin kehys, joka sisältää animaatioita, siirtymäefektejä ja automaattisia CSS-tyylejä HTML-peruselementeille. Tässä oppaassa toivon, että esitän alustan siten, että voit tuntea olonsa mukavaksi suunnittelemalla omia jQuery-mobiilisovelluksiasi.

Ominaisuudet ja käyttöjärjestelmä

Syy, miksi ehdotan jQuery Mobilen oppimista muihin kehyksiin, on yksinkertaisuus. Koodi on rakennettu jQuery-ytimeen, ja sillä on aktiivinen kehittäjäryhmä, joka kirjoittaa komentosarjoja ja muokkaa virheitä. Monista ominaisuuksista ovat HTML5-tuki, Ajax-käyttöiset navigointilinkit ja kosketus- / pyyhkäisy-tapahtumakäsittelijät.

Tuki vaihtelee puhelimien välillä ja se hajotetaan kolmesta A-C-luokasta. A on ylin taso, joka tarjoaa täyden tuen jQuery Mobileille, B: llä on kaikki lukuun ottamatta Ajaxia, kun taas C on perus-HTML, jossa on vähän-to-no-JavaScript. Onneksi suurin osa suosituista käyttöjärjestelmistä on täysin tuettu - lisäsin vain muutaman esimerkin alla olevan luettelon.

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• Windows Phone 7
• Blackberry 6.0, Blackberry 7
• Palm WebOS 1.4-2.0, 3.0

Jos haluat lisätietoja, kokeile lukea virallisilla asiakirjoillaan. Se ei ole kirjoitettu hurjaksi ja todella tuntuu hyvin helposti seurattavalta. Keskity nyt jQuery-mobiilisivun kirjoittamisen perusteisiin ja siihen, miten voimme rakentaa pienen sovelluksen!

Vakio HTML-malli

Voit saada ensimmäisen mobiilisovelluksesi toimimaan asetetun mallin avulla. Tämä sisältää jQuery-peruskoodin yhdessä mobiilin JS: n ja CSS: n kanssa, jotka kaikki ovat ulkoisia jQuery CDN: stä. Katso alla olevasta esimerkkikoodistani.

Ainoat vieraat elementit tässä pitäisi olla kaksi metakoodia. Huippu viewport tunniste päivittää mobiiliselaimet käyttämään täyttä zoomaustehoa. Arvon asettaminen width = laite-leveys asettaa sivun leveyden puhelimen näytön leveydelle. Ja mikä parasta, se ei poista zoomausominaisuuksia, koska jQuery Mobile voi sopeutua siirtymiseen.

Seuraava metatunniste X-UA-yhteensopiva pakottaa Internet Explorerin tekemään HTML: n viimeisimmässä iteroinnissaan. Vanhemmat selaimet ja erityisesti mobiili yrittävät kiertää tuntemattomia renderöintivirheitä.

Kehon sisällön rakentaminen

Nyt tämä on, jos jQuery mobile voi saada hankalaa. Jokainen HTML-sivu ei välttämättä ole 1 sivu mobiilisivustossa. Kehyksessä käytetään HTML5: n tietomääritteitä, joita voit luoda huipulla liittämällä data- etukäteen. Samalla tavalla data-asema = "sivulla" voidaan asettaa useammaksi diviksi yhdellä HTML-tiedostolla, jolloin saat enemmän kuin yhden sivun.

Sitten siirrät näiden sivujen välillä ankkurilinkeillä ja yksilöllisellä tunnuksella. Tämä asetus on hyvä idea yksinkertaisia, yksinkertaisia ​​sovelluksia varten. Jos tarvitset vain 3-5 sivua, niin miksi et tallenna sitä yhteen tiedostoon? Ellei sinulla ole paljon kirjoitettua sisältöä, yritä käyttää PHP: tä, jos haluat säästää aikaa.

Jos olet kadonnut, tarkista alla oleva koodi.

 
 
 
Ylin otsikkopalkki
 
 
 
Näytä toinen sivu??
 
vihje: napsauta alla olevaa painiketta!
 
Meistä
 
  
 
 
 
Sivu 2 Tässä
 
 
 
vain hieman ylimääräistä sisältöä.
 
Tarkoitan, voit mene takaisin milloin vain.
 
 
   

Tutustu hakemistosivun ankkurilinkkiin hetkeksi. Huomaa Lisäsin määritteen data-asema = "painiketta" määrittää linkin painikkeena. Mutta sen sijaan, että käytät oletustyyliä, otamme ne mukaan data-teeman = "C". Tämä vaihtaa 1: stä viidestä (a-e) -mallit, jotka on pakattu oletuksena CSS-tyylinä jQ Mobile -palvelussa.

Oma painike kattaa myös koko sivun leveyden. Voit poistaa toiminnon asettamalla elementin lohkosta inline-näyttöön. Tämän tekeminen on data-inline = "true" jonka voit liittää mihin tahansa ankkuripainikkeeseen.

Otsikko ja alatunniste

Sovellusten alkuun ja yläosaan tulee lisätä otsikon ja alatunnisteen sisältö. Tämä muotoilu on usein omistettu iOS-sovelluksille, joista tuli suosittu Applen mobiilisovelluksen avulla. jQ Mobile käyttää datan roolin määritteitä otsikon, alatunnisteen ja sivun sisällön määrittämiseksi. Katsotaanpa lyhyesti näitä alueita.

Top-palkkipainikkeet

Oletusarvoisesti yläpalkki tukee kahden (2) linkin sarjaa samalla tavalla kuin muut mobiilisovellukset. iOS: n oletusarvo on a “takaisin” painiketta vasemmalle ja usein “vaihtoehtoja” tai “config” oikealla.

 
 asetukset 
Sivu 2 Tässä
 
 

Yllä oleva koodi keskittyy vain About-sivun div-konttiin ja otsikkosisältöön. HTML-lisäominaisuus data-add-back-BTN = "true" toimii vain, jos se lisätään sivutietojen rooliin. Tarkoituksena on sisällyttää automaattisesti takaisin-painike, joka toimii samalla tavalla kuin selaimesi takaisin-painike.

Olisi voinut lisätä takaisin-painikkeen manuaalisesti samalla koodilla kuin käytimme sisältöalueella. Mutta minusta tuntuu, että tämä kestää paljon kauemmin, etenkin useilla sivuilla. Kaikki otsikkosivun ankkurilinkit oletusarvoisesti vasen / oikea-painikkeisiin. Käyttämällä class = "UI-BTN-right" Tämä sijoitti asetukset-painikkeen uudelleen, joten takapainiketta varten on tilaa. Käytän myös toissijaista teematyyliä antamaan sille ylimääräistä säröä!

Alatunnisteiden navigointi

Alatunniste-alue ei useinkaan tunne kovin hyödyllistä. Se on paikka, jossa voit tallentaa tekijänoikeuksia ja tärkeämpiä linkkejä, mutta tämä voi olla yhtä helppoa lisätä sisältöalueen alareunassa. Joten mitä hyvä käyttää alatunnistetta?

Hyvä esimerkki, jota olen nähnyt, käyttää alatunnitilaa navigointijärjestelmänä, jossa välilinkit näyttävät ohjaamaan sivun navigointia. On runsaasti vaihtoehtoja, joissa voit valita koko näytön tehosteita, lisätä kuvakkeita, säätää sijoittelua ja muutamia muita ominaisuuksia. Mutta rakenna vain yksinkertainen alatunniste, jossa on 3 painiketta, jotta saat käsityksen siitä, miten tämä toimii.

• Esikatsele live-demoa

Joten tässä on noin alatunnistekoodi noin sivun osiosta. data-asema = "navbar" tulee lisätä säiliöelementtiin, jossa on järjestämätön lista, ja EI itse UL-elementtiä. Jokainen luettelon linkki käsitellään välilehtipalkkina, joka sitten jakautuu tasaisesti linkkien kokonaismäärän perusteella. Lisäluokka ui-body-b vain lisää esteettisiä vaikutuksia, kun vaihdamme muutaman käytettävissä olevan tyylin välillä.

Jos huomaat ensimmäisellä painikkeella, minulla on attribuutti data-suunta = "käänteinen". Vaikka voisin käyttää paluupainiketta, kuten aiemmin, palata kotisivulle, olen käyttänyt sen sijaan sivun tunnusta #indeksi. Oletusarvoisesti sovellusikkuna siirtyy oikealle, joka näyttää melko tahmealta, koska odotat animaation liikkuvan taaksepäin. Voit pelata noin enemmän näistä animoiduista vaikutuksista, jos sinulla on aikaa. Tutustu jQuery-dokumentaation siirtymien tietosivulle.

Ajax ja dynaamiset sivut

Ensimmäinen segmentti on avannut avainkohdat mobiilisovelluksen rakentamiseen jQueryn kanssa. Mutta haluan aloittaa uuden sovelluksen, joka lataa tietoja ulkoiselta sivulta. Käytän hyvin yksinkertaista PHP-komentosarjaa $ _REQUEST [] muuttuja ja näyttää pienen Dribbble-laukauksen vastaavasti. Alla olevan kuvaruudun pitäisi antaa sinulle käsitys siitä, mitä aiomme rakentaa.

Ensin tehdään index.html -sivu oletusmallille. Tässä aloitusnäytössä käytän luettelonäkymän asetusta näyttääksesi kunkin linkin järjestyksessä. Tämä tapahtuu sisällön alueella a data-asema = "ListView" attribuutti luetteloruudussa. Leikkaamalla saman otsikon tavaraa kuin aiemmin, lisäsin kaikki koodin tästä uudesta hakemistosivulta.

 
 
 
Lokakuu 2011 Shots
 
 
 
 
Ensimmäinen kuva
 
Toinen kuva
 
Kolmas kuva
 
Neljäs kuva
 
 
  
   

Kukin listanäkymässä olevista ankkurilinkeistä osoittaa saman tiedoston - index.php. Mutta olemme menossa parametrissa imgid pyynnön muuttujana. Image.php-tiedostossa otamme ID: n ja testataan sitä 4 esiasetettua arvoa vastaan. Jos jokin ottelu tapahtuu, käytämme vastaavaa kuvan URL-osoitetta ja nimeä, muuten näytämme vain oletusarvon Dribbble-laukauksen.

Image Loader Script

Image.php-komentosarjassa on edelleen jQuery-mobiilimalli, joka on lisätty koodiin. Se todella jakaa hyvin samanlaisen otsikon ja alatunnisteen, lukuun ottamatta takalinkki-attribuutin lisäämistä data-add-back-BTN = "true". Huomaa, että tämä painike tulee näkyviin vain, jos tulemme ensin index.html: stä! Kokeile suoraan image.php-latausta ja mitään ei tule näkyviin, koska ei ole “takaisin” siirtyä.

Luulen, että voimme tehdä hieman enemmän tunnetta koodista tutkimalla ensin PHP-logiikkaa. Käytämme a vaihtaa / tapaus tapa tarkistaa 4 eri tunnusta ja antaa otsikon nimi, kuvan URL-osoite ja alkuperäisen artistilähteen linkki.

Kaikki näyttää melko suoraviivaiselta - jopa aloittelija PHP dev: n pitäisi pystyä seuraamaan! Ja jos et ymmärrä, se ei ole tärkeää jQuery-koodille, joten älä huoli. Meidän on vaihdettava nyt ja katsomaan mallia, jonka olen rakentanut uudelle sivulle. Kaikki HTML-koodi lisätään yllä olevan koko PHP-lohkon jälkeen. Käytin “kuvien” säiliön kohdalla ja jopa määritä otsikko muutettavaksi jokaisen uuden valokuvan kanssa.

 
 
 
 
 
 Näytä alkuperäinen
 
 
  
 

Voit nähdä, kuinka yksinkertainen tämä demo on. Mutta koko tarkoituksena on osoittaa jQuery mobilein skaalautuvuus. PHP voidaan helposti lisätä yhdistelmään ja voit viettää joitakin todella siistejä sovelluksia vain muutaman tunnin kehityksellä.

Fancy Design ja listan pikkukuvat

Viimeinen lisäteho, jota voimme toteuttaa, on pikkukuvien käyttö listaussivun elävöittämiseksi. Haluan myös jakaa tekstin otsikko- ja kuvauskenttään, jolloin näytetään sekä taideteoksen nimi että artistin nimi.

Aloita Photoshopin avaaminen ja luo 80 × 80 px -asiakirja. Koon jokainen kuva nopeasti uudelleen ja tallennan pikkukuvat vastaamaan kutakin kuvaa. Päivitä sitten luettelonäkymän kohteet, joiden pitäisi sisältää muutamia muita elementtejä.

Tutustu alla olevaan koodiin ja demo-esimerkkini nähdäksesi mitä tarkoitan.

[Esikatselu Live Demo]

 
 
  
Wunderkit-tehtävät
 
esittäjä (t): Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
Scott Hill
 
  
Foorumin sovellus Facebookille
 
Ionut Zamfir
 
  
Viserrys
 
Sam Jones
 
 
 

Luokat Ui-li-nimikkeisiin ja Ui-li-desc lisätään oletusarvoisesti jQuery Mobilen tyylitaulukkoon. Tämä on samanlainen kuin kuvaluokka Ui-li-peukalo joka mittaa automaattisesti jokaisen luettelonäkymispalkin kuvan korkeuden mukaan. Nyt voit rakentaa entistä enemmän animaatioita, sivuvaikutuksia, tyylitaulukoita jne.

Vaihtoehtoisesti voit aloittaa taustajärjestelmän rakentamisen, jotta voit ladata uusia kuvia ja leikata automaattisesti pienoiskuvat, jotka sisällytetään luetteloon. JQuery Mobileilla on niin paljon joustavuutta, että melkein et voi merkitä sitä vain JavaScript-kirjastoksi. Se on enemmän kuin koko HTML5 / CSS / jQuery-kehys nopean ja skaalautuvan mobiilisovelluksen rakentamiseen.

johtopäätös

Tämän artikkelin kirjoittamisen jälkeen jQuery Mobile -tiimi on virallisesti julkaissut koodikirjaston RC1.0: n. Tämä tarkoittaa, että useimmat, elleivät kaikki tärkeimmät vikakorjaukset ole purettu, ja nyt testaajat ovat valmiita täydelliseen julkaisuun. Tämän vuoksi et löydä koko verkossa paljon tietoa.

Mutta kuten kuukausia etukäteen, web-kehittäjät varmasti nousevat suuntaukseen. Matkapuhelinsovellukset ja jopa mobiilisovellukset ovat kasvaneet suosiona älypuhelimien valtavan kasvun myötä. Web-kehittäjillä ei ole aikaa oppia täyden ohjelmointikielen Android / iOS-sovellusten rakentamiseen. Näin jQuery Mobile on ohut vaihtoehto, johon kuuluu tuki useimmille mobiilialan ohjelmistoille ja joka kasvaa joka päivä aktiivisen kehittäjäyhteisön kanssa.