„Mobile App Design / Dev Beginner's Guide to jQuery Mobile“ vadovas

Per pastaruosius 2-3 metus matėme didžiulį mobiliųjų svetainių naršyklės ir OS palaikymą. Svarbiausia yra „Apple“ iOS ir „Google“ „Android“ platformos. Tačiau kiti, pavyzdžiui, „PalmOS“ ir „Blackberry“, vis dar yra derinyje. Iki šiol buvo labai sunku suderinti vieną mobilųjį telefoną su visomis šiomis platformomis.

„JavaScript“ buvo pradžia, tačiau iki šiol nebuvo jokios tikrai vieningos bibliotekos. jQuery Mobile naudoja visas geriausias „jQuery“ savybes ir perkelia jas į mobilųjį žiniatinklio šaltinį. Biblioteka labiau panaši į sistemą, kuri apima animacijas, perėjimo efektus ir automatinius CSS stilius pagrindiniams HTML elementams. Šiame vadove tikiuosi pristatyti platformą taip, kad galėtumėte jaustis patogiai kurti savo „jQuery“ mobiliojo ryšio programas.

Funkcijos ir OS palaikymas

Priežastis, kodėl siūlau mokytis jQuery Mobile bet kokiu kitu pagrindu, yra paprastumas. Kodas buvo pastatytas ant jQuery branduolio ir turi aktyvią kūrėjų komandą, kuri rašo scenarijus ir redaguoja klaidas. Iš daugelio funkcijų yra HTML5 palaikymas, „Ajax“ valdomos navigacijos nuorodos ir „Touch / Swipe“ renginių tvarkytojai.

Parama skiriasi telefonais ir yra suskirstyta į 3 kategorijų diagramą iš A-C. A yra aukščiausioji pakopa, kuri gali pasigirti visišku „jQuery Mobile“ palaikymu, B turi viską, išskyrus „Ajax“, o C yra pagrindinis HTML su nedideliu „JavaScript“. Laimei, dauguma populiarių operacinių sistemų yra visiškai palaikomos - pridėjau tik keletą pavyzdžių.

• „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

Jei norite sužinoti daugiau, pabandykite perskaityti savo oficialių dokumentų puslapyje. Tai nėra parašyta gibberish ir iš tikrųjų jaučiasi labai lengva sekti. Dabar susitelkime į jQuery mobiliojo puslapio rašymo pagrindus ir tai, kaip galime sukurti nedidelę programą!

Standartinis HTML šablonas

Jei norite, kad jūsų pirmoji mobilioji programa veiktų, turite nustatyti šabloną, kurį turėtumėte pradėti. Tai apima „jQuery“ bazinį kodą kartu su mobiliuoju „JS“ ir „CSS“, kurie visi yra išoriniai iš „jQuery CDN“. Peržiūrėkite žemiau pateiktą mano pavyzdžio kodą.

Vieninteliai užsienio elementai turėtų būti du meta žymekliai. Viršus peržiūros sritis žyma atnaujina naršykles mobiliesiems, kad galėtumėte naudoti pilną mastelio efektą. Vertės nustatymas plotis = įrenginio plotis nustatys puslapio plotį tiksliai telefono ekrano plotyje. Ir geriausia tai, kad ji neleidžia priartinti priartinimo funkcijų, nes jQuery Mobile gali prisitaikyti prie besikeičiančių išdėstymų.

Kita meta žyma X-UA suderinama tiesiog priverčia „Internet Explorer“ atkurti HTML naujausią iteraciją. Senesnės naršyklės ir ypač mobilieji bandys patekti į nepažįstamas atvaizdavimo klaidas.

Kūno turinio konstravimas

Dabar tai yra, kai jQuery mobile gali gauti sudėtinga. Kiekvienas HTML puslapis nebūtinai yra 1 puslapis mobiliajame tinklapyje. Sistema naudoja HTML5 duomenų atributus, kuriuos galite sukurti pridedant duomenis- iš anksto. Panašiai data-role = "puslapis" vienas HTML failas gali būti nustatytas keliems dalims, suteikiant jums daugiau nei vieną puslapį.

Tuomet perkeltumėte tarp šių puslapių su ankerinėmis nuorodomis ir unikaliu ID. Ši sąranka yra gera idėja paprastoms, paprastoms programoms. Jei jums reikia tik 3-5 puslapių, kodėl gi ne visa tai išsaugoti viename faile? Jei neturite daug rašytinio turinio, tokiu atveju pabandykite naudoti PHP, kad sutaupytumėte laiko.

Jei pametėte, patikrinkite toliau pateiktą kodo pavyzdį.

 
 
 
Viršutinė pavadinimo juosta
 
 
 
Rodyti kitą puslapį??
 
užuomina: spustelėkite žemiau esantį mygtuką!
 
Apie mus
 
  
 
 
 
Puslapis 2 Čia
 
 
 
tik šiek tiek papildomo turinio.
 
Aš turiu galvoje eik atgal bet kada.
 
 
   

Pažvelkite į inkaro nuorodą iš indekso puslapio. Pastaba Pridėjau atributą data-role = "mygtukas" nustatyti nuorodą kaip mygtuką. Tačiau vietoj naudojamų numatytų stilių mes įtraukiame data-theme = "c". Tai persijungia tarp 1 iš 5 (temos a-e) šablonų, kurie pagal paketą yra pakuojami pagal CSS stilius jQ Mobile.

Mano mygtukas taip pat apima visą puslapio plotį. Norint pašalinti elgesį, elementą reikia nustatyti iš bloko į eilutę. Tai yra atributas data-inline = "true" kurį galite pridėti prie bet kurio mygtuko.

Antraštės ir poraštės juostos

Kartu su savo viršutine ir apačia taikomosiomis programomis turėtumėte pridėti antraštės ir poraštės turinį. Šis dizaino stilius dažnai priskiriamas „iOS“ programoms, kurios pirmą kartą tapo populiariomis naudojant „Apple“ mobilųjį „App Store“. jQ Mobile naudoja duomenų vaidmens atributus, kad nustatytų antraštę, poraštę ir puslapio turinį. Pažvelkime į šias sritis.

Viršutinės juostos mygtukai

Pagal numatytuosius nustatymus viršutinė juosta palaiko dviejų (2) nuorodų rinkinį panašiai kaip ir kitos mobiliosios programos. iOS yra numatytasis a “atgal” mygtukas į kairę ir dažnai “galimybės” arba “konfig” dešinėje.

 
 Nustatymai 
Puslapis 2 Čia
 
 

Aukščiau pateikiamas kodas yra tik sutelktas į „div“ konteinerį mūsų puslapyje, taip pat antraštės turinį. Papildomas HTML atributas data-add-back-btn = "tiesa" veiks tik tada, kai pridėsite į puslapio duomenų vaidmenį. Tikslas yra automatiškai įtraukti atgalinį mygtuką, kuris veikia panašiai kaip jūsų naršyklės atgalinis mygtukas.

Mes galėjome pridėti atgalinį mygtuką rankiniu būdu su panašiu kodu, kurį naudojome turinio srityje. Bet manau, kad tai užtrunka daug ilgiau, ypač daugelyje puslapių. Visos antraštės skiltyje esančios inkarų nuorodos bus įjungtos į kairę / dešinę mygtukų pozicijas. Naudojant class = "ui-btn-right" tai vėl įdėjo mano mygtuką „Nustatymai“, kad būtų laisvos vietos atgal mygtukui. Taip pat naudoju antrinių temų stilius, kad galėčiau suteikti papildomą šnipą!

Footer navigacija

Kojos sritis daugeliui jaučiasi labai naudinga. Tai vieta, kurioje galite saugoti autorių teisių medžiagą ir svarbesnes nuorodas, tačiau tai gali būti taip pat lengvai pridėta turinio srities apačioje. Taigi, kas gera naudoja poraštę?

Geriausias pavyzdys, kurį mačiau, naudoja poraštės erdvę kaip navigacijos sistemą, kurioje rodomos skirtukų nuorodos. Yra daug galimybių, kuriose galite pasirinkti viso ekrano efektus, pridėti piktogramas, sureguliuoti vietą ir kelis kitus atributus. Bet pastatykime paprastą poraštės navigaciją su 3 mygtukais ir gaukite, kaip tai veikia.

• Peržiūrėti tiesioginę demonstraciją

Taigi, čia yra keletas poraštės kodo, skirto maždaug puslapio puslapiui. data-role = "navbar" turi būti pridėta ant konteinerio elemento, kuriame yra neregistruotas sąrašas, o ne UL elementą. Kiekviena sąraše esanti nuoroda yra traktuojama kaip skirtuko juosta, kuri tada lygiai pasiskirsto pagal bendrą nuorodų skaičių. Papildoma klasė ui-body-b tiesiog pridedami estetiniai efektai, kai pereisime tarp kelių prieinamų stilių.

Jei pastebėsite pirmąjį mygtuką, turiu atributą duomenų kryptis = "atvirkštinė". Nors galėčiau naudoti atgalinį mygtuką, kaip anksčiau, kad grįžtumėte į pagrindinį puslapį, aš naudoju puslapio #indeksas. Pagal nutylėjimą programos langas pereis į dešinę, kuri atrodo gana lipni, nes tikitės, kad animacija judės atgal. Jei turite laiko, galite žaisti net daugiau šių animuotų efektų. Peržiūrėkite jQuery dokumentacijos perėjimo informacijos puslapį.

„Ajax“ ir „Dynamic Pages“

Pirmasis segmentas tikrai atvėrė svarbiausius dalykus mobiliosios programos kūrimui su jQuery. Bet aš noriu pradėti naują programą, kuri įkels duomenis iš išorinio puslapio. Norėčiau pasiekti labai paprastą PHP scenarijų $ _REQUEST [] kintamas ir atitinkamai rodomas mažas Dribbble. Žemiau pateiktame ekrano vaizde turėtų būti suteikta idėja, ką ketiname kurti.

Pirmiausia nustatysiu index.html puslapį, esantį numatytame šablone. Šiame pradiniame ekrane aš naudoju sąrašo rodinio nustatymą, kad būtų rodoma kiekviena nuoroda pagal tvarką. Tai daroma turinio srityje su a data-role = "listview" atributas sąrašo talpykloje. Išskyrus tą patį antraštės turinį, kaip ir anksčiau, pridėjau visą savo kodą iš šio naujo indekso puslapio.

 
 
 
2011 m. Spalio mėn
 
 
 
 
Pirmasis vaizdas
 
Antrasis vaizdas
 
Trečias vaizdas
 
Ketvirtas vaizdas
 
 
  
   

Kiekviena mano sąrašo rodinyje esanti inkaro nuoroda rodo tą patį failą - index.php. Bet mes einame į parametrą imgid kaip užklausos kintamasis. Faile image.php įvedame ID ir išbandome jį pagal 4 iš anksto nustatytas reikšmes. Jei bet kokio atitikimo metu mes naudojame atitinkamą vaizdo URL ir pavadinimą, kitaip mes tiesiog rodome numatytąjį „Dribbble“ šūvį.

„Image Loader Script“

Scenarijus „image.php“ vis dar turi numatytąjį jQuery mobiliojo šabloną, pridėtą prie kodo. Jis iš tikrųjų turi labai panašią antraštę ir poraštę, išskyrus papildomos nuorodos atributo pridėjimą data-add-back-btn = "tiesa". Atkreipkite dėmesį, kad šis mygtukas bus rodomas tik tada, jei pirmiausia būsime iš index.html! Pabandykite tiesiogiai įkelti image.php ir nieko nebus, nes nėra “atgal” pereiti prie.

Manau, kad mes galime šiek tiek geriau suprasti kodą pirmiausia išnagrinėdami savo PHP logiką. Mes naudojame a jungiklis / atveju būdas patikrinti 4 skirtingus ID ir pateikti antraštės pavadinimą, vaizdo URL ir originalų kūrėjo šaltinio nuorodą.

Viskas atrodo gana paprasta - net naujokas PHP dev turėtų galėti sekti! Ir jei jūs nesuprantate, jQuery kodui vis tiek nėra svarbu, todėl nesijaudinkite. Dabar turėtume persijungti ir pažvelgti į šiame naujame puslapyje sukurtą šabloną. Visi HTML kodai pridedami po to, kai visas PHP blokas yra aukščiau. Aš naudoju “vaizdai” už konteinerį ir netgi nustatykite antraštę, kad pakeistumėte kiekvieną naują nuotrauką.

 
 
 
 
 
 Peržiūrėti originalą
 
 
  
 

Jūs tikriausiai galite pamatyti, kaip tai paprasta. Tačiau visas tikslas yra parodyti jQuery mobiliojo įrenginio mastelį. PHP gali būti lengvai įtrauktas į mišinį, o jūs galite ištuštinti keletą tikrai tvarkingų programų su vos keliomis valandomis.

Išgalvotas dizainas su sąrašo miniatiūromis

Paskutinis papildomas efektas, kurį galime įgyvendinti, yra miniatiūrų naudojimas, kad pagyvintumėte įrašų puslapį. Aš taip pat ketinu padalyti tekstą į antraštę ir aprašymo langelį, kad būtų rodomas ir kūrinio pavadinimas, ir atlikėjo vardas.

Norėdami pradėti atidaryti „Photoshop“ ir sukurti 80 × 80 px dokumentą. Aš greitai perskirsiu kiekvieną vaizdą ir išsaugosiu miniatiūras, kad atitiktų kiekvieną. Tada atnaujindami sąrašo peržiūros elementus turėtume įtraukti dar keletą elementų.

Patikrinkite toliau pateiktą kodą ir mano demo pavyzdį, kad pamatytumėte, ką aš turiu galvoje.

[Peržiūrėti tiesioginę demonstraciją]

 
 
  
„Wunderkit“ užduotys
 
Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
„Scott Hill“
 
  
„Facebook“ forumo programa
 
Ionut Zamfir
 
  
„Twitter“
 
Sam Jones
 
 
 

Klasės ui-li-pozicija ir ui-li-desc pagal jQuery Mobile stilių lentelę pridedami pagal nutylėjimą. Tai panaši į vaizdo klasę ui-li-thumb kuri automatiškai pakeičia kiekvieno sąrašo peržiūros juostą pagal vaizdo aukštį. Dabar iš čia galite sukurti daugiau ant animacijos, puslapio efektų, stilių lentelių ir pan.

Arba galite pradėti kurti „backend“ sistemą, kad galėtumėte įkelti naujus vaizdus ir automatiškai supjaustyti miniatiūras, įtrauktas į sąrašą. „JQuery Mobile“ yra tiek daug lankstumo, kurį beveik negalite pažymėti tik kaip „JavaScript“ biblioteką. Tai daugiau viso HTML5 / CSS / jQuery sistemos, skirtos greitai ir keičiamoms mobiliosioms programoms kurti.

Išvada

Rašydamas šį straipsnį, jQuery Mobile komanda oficialiai paskelbė kodų bibliotekos RC1.0. Tai reiškia, kad dauguma, jei ne visi pagrindiniai klaidų ištaisymai buvo susmulkinti, o dabar testuotojai pasirengę visiškai paleisti. Dėl šios priežasties internete nerasite daug informacijos.

Tačiau, kaip mėnesiai iš anksto žiniatinklio kūrėjai tikrai pasieks šią tendenciją. Mobiliosios programos ir netgi mobilieji žiniatinklio maketai vis labiau populiarėja, didėjant smartfonams. Žiniatinklio kūrėjai neturi laiko išmokti visą programavimo kalbą „Android“ / „iOS“ programoms kurti. Taigi jQuery Mobile yra plona alternatyva, kuri apima paramą daugumai mobiliojo ryšio pramonės programinės įrangos ir toliau auga kiekvieną dieną su aktyvia kūrėjų bendruomene.