Mobilalkalmazás-tervezés / Dev Beginner's Guide to jQuery Mobile

Az elmúlt 2-3 évben hatalmas növekedést tapasztaltunk a mobil weboldalak böngésző- és operációs rendszereinek támogatásában. Leginkább az Apple iOS és a Google Android platformjai jönnek eszembe. De mások, mint a PalmOS és a Blackberry még mindig a keverékben vannak. Egészen a közelmúltig nagyon nehéz volt egyetlen mobil témát ezekhez a platformokhoz igazítani.

A JavaScript kezdete volt, de eddig nem volt igazán egységes könyvtár. A jQuery Mobile a jQuery összes legjobb tulajdonságát veszi át, és áthelyezi azokat egy mobil alapú webforrásba. A könyvtár inkább olyan keret, amely animációkat, átmeneti hatásokat és automatikus CSS-stílusokat tartalmaz az alapvető HTML-elemek számára. Ebben az útmutatóban remélem, hogy bemutatom a platformot oly módon, hogy jól érezze magát a saját jQuery mobilalkalmazásainak kialakításában.

Jellemzők és operációs rendszer támogatása

Az ok, amiért azt javaslom, hogy a jQuery Mobile-t más kereteken keresztül tanuljam meg, az egyszerűség. A kódot a jQuery magra építették, és aktív fejlesztői csapata írja a parancsfájlokat és hibákat szerkeszt. A sok funkció közül a HTML5 támogatás, az Ajax-meghajtású navigációs linkek és az érintés / ujjlenyomat-kezelők.

A támogatás a telefonok között változik, és az A-C-ből 3 kategóriába sorolható. A a legmagasabb szint, amely a jQuery Mobile teljes támogatásával büszkélkedhet, a B mindennek az Ajax kivételével, míg a C az alap HTML, kevésbé JavaScript. Szerencsére a népszerű operációs rendszerek nagy része teljes mértékben támogatott - csak néhány példát adtam hozzá.

• 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

Ha többet szeretne megtanulni, próbálja meg olvasni a hivatalos dokumentumok oldalán. Nem gibberisben van írva, és tényleg nagyon jól érzi magát. Most összpontosítsunk a jQuery mobil oldal írásának alapjaira és arra, hogyan tudunk egy kis alkalmazást építeni!

A standard HTML-sablon

Ahhoz, hogy az első mobilalkalmazás működjön, van egy beállított sablon, amelyet el kell kezdeni. Ez magában foglalja a jQuery alapkódot a mobil JS és CSS mellett, amelyek mindegyike külső jQuery CDN-ből áll. Nézze meg az alábbi példakódot.

Az egyetlen idegen elemnek a két metatagolónak kell lennie. A csúcs nézetablakban A címke frissíti a mobil böngészőket a teljes zoom hatás használatához. Az érték beállítása szélesség = eszköz-szélesség pontosan a telefon képernyő szélességét állítja be. A legjobb az egészben, hogy nem kapcsolja ki a zoom funkciókat, mivel a jQuery Mobile alkalmazkodik a változó elrendezésekhez.

A következő metatag X-UA-kompatibilis csak arra kényszeríti az Internet Explorer-et, hogy a legutóbbi iterációjában megjelenítse a HTML-t. Az idősebb böngészők és különösen a mobilok megpróbálják megismerni az ismeretlen renderelési hibákat.

A testtartalom megalkotása

Most ez a hely, ahol a jQuery mobile trükkös lehet. Minden HTML oldal nem feltétlenül 1 oldal a mobil oldalon. A keretrendszer a HTML5 adattulajdonságait használja fel, melyeket hozzáadással létrehozhatsz szeszélyesen adat- előzetesen. Hasonló módon data-role = "page" egy HTML-fájlban több osztásra is beállítható, így több oldalt is megadhat.

Ezután az oldalak között horgonyzó hivatkozásokkal és egyedi azonosítóval mozogna. Ez a beállítás jó ötlet az egyszerű, egyszerű alkalmazások számára. Ha csak 3-5 oldalra van szüksége, akkor miért ne tárolja mindent egyetlen fájlban? Hacsak nincs sok írásos tartalma, ebben az esetben próbálja meg a PHP-t használni, hogy időt takarítson meg.

Ha elveszett, ellenőrizze az alábbi kódpéldát.

 
 
 
A felső címsor
 
 
 
Mutasson egy másik oldalt??
 
tipp: kattintson az alábbi gombra!
 
Rólunk
 
  
 
 
 
Page 2 Itt
 
 
 
csak néhány extra tartalom.
 
Úgy értem, tudod menjen vissza bármikor.
 
 
   

Vessen egy pillantást az indexoldalon lévő horgony linkre. Megjegyzés: Hozzáadtam az attribútumot data-role = "button" a link beállítása gombként. De az alapértelmezett stílusok használata helyett data-theme = "c". Ez az 5-ös (a-e témák) 1-es sablonok között vált át, amelyek alapértelmezés szerint CSS-stílusként vannak csomagolva a jQ Mobile-ban.

A gomb megnyomja a teljes oldalszélességet is. A viselkedés eltávolításához be kell állítanunk az elemet a blokkról a soros kijelzőre. Ennek az attribútuma az data-inline = "true" melyet bármelyik horgonygombhoz csatolhat.

Fejléc és lábléc bárok

Az alkalmazások felső és alsó részén a fejléc és a lábléc tartalmát kell hozzáadnia. Ezt a tervezési stílust gyakran az iOS-alkalmazások tulajdonítják, amelyek elsődlegesen népszerűvé váltak az Apple mobil App Store alkalmazásával. A jQ Mobile az adat szerepkör attribútumait használja a fejléc, a lábléc és az oldal tartalmának meghatározásához. Nézzük röviden ezeket a területeket.

Top gombok

Alapértelmezés szerint a felső sáv két (2) linket tartalmaz, hasonlóan más mobilalkalmazásokhoz. Az iOS alapértelmezés szerint az a “hát” gomb balra és gyakran egy “opciók” vagy “config” jobbra.

 
 Beállítások 
Page 2 Itt
 
 

A fenti kód csak azokra a div tárolóra fókuszál, amelyek a Névjegy oldalunkon, valamint a fejléc tartalmával együtt. A további HTML attribútum data-add-back-BTN = "true" csak akkor működik, ha hozzáad egy oldaladat-szerephez. A cél az, hogy automatikusan tartalmazzon egy vissza gombot, amely hasonló a böngésző vissza gombjához.

A tartalmi területen használt kódhoz hasonló kóddal lehetett hozzáadni egy hátsó gombot. De úgy érzem, ez sokkal hosszabb időt vesz igénybe, különösen több oldalra. A fejlécrészen lévő összes horgonycsatlakozás alapértelmezés szerint bal / jobb gomb pozíciókba kerül. Használva class = "ui-Btn jobb" ez újból elhelyezte a Beállítások gombot, így szabad hely áll a hátsó gombhoz. Szintén a másodlagos témastílusokat használom, hogy adjak egy kis extra pontot!

Lábléc navigáció

A láblécterület sokan nem érzik magukat nagyon hasznosnak. Ez egy olyan hely, ahol a szerzői jogokat és fontosabb hivatkozásokat tárolhatja, de ez ugyanolyan könnyen hozzáadható a tartalmi terület alján. Tehát mi a jó a lábléc használata?

Nos, a legjobb példa, amit láttam, láblécteret használ, mint egy navigációs rendszert, ahol a laphivatkozások a lap navigációját vezérlik. Számos lehetőség van, ahol kiválaszthatja a teljes képernyős effekteket, hozzáadhat ikonokat, beállíthatja az elhelyezést és néhány más attribútumot is. De építsünk egy egyszerű láblécet, 3 gombbal, hogy megértsük, hogyan működik ez.

• Élő bemutató előnézete

Tehát itt van néhány lábléc kód az oldalrészhez. data-role = "Navbar" fel kell tüntetni a tartály elemére, amely egy rendezetlen listát tartalmaz, és NEM az UL elemet. A listán belüli minden linket tabuláris sávként kezelik, amely akkor egyenlően oszlik meg a linkek teljes száma alapján. A kiegészítő osztály ui-test-b csak az esztétikai hatásokat hozza létre, amikor a kevés rendelkezésre álló stílus között váltunk.

Ha az első gombra kattint, az attribútum van adatok-irányban = „fordított”. Annak ellenére, hogy a hátsó gombbal, mint korábban, vissza tudtam térni a kezdőlapra, az oldal azonosítóját használtam #index. Alapértelmezés szerint az alkalmazásablak jobbra vált át, ami eléggé ragadósnak tűnik, mivel az animáció hátrafelé halad. Még több animált effektussal is játszhat, ha van ideje. Nézze meg a jQuery dokumentáció átmeneti információs oldalát.

Ajax és dinamikus oldalak

Az első szegmens valóban megnyitotta a kulcsfontosságú pontokat a mobilalkalmazás megépítéséhez a jQuery segítségével. De szeretnék elindítani egy új alkalmazást, amely külső adatokat tölt fel. Egy nagyon egyszerű PHP szkriptet fogok használni a cél eléréséhez $ _REQUEST [] változó, és ennek megfelelően egy kis Dribbble felvételt készít. Az alábbi képernyőkijelzésnek meg kell adnia egy ötletet, hogy mit fogunk építeni.

Először egy index.html oldalt állítok be az alapértelmezett sablonra. Ehhez a kezdőképernyőhöz listanézet-beállítást használok az egyes linkek sorrendben történő megjelenítéséhez. Ez a tartalmi területen történik a data-role = "listview" attribútum. Ugyanezen fejlécdarabok kivágása, mint korábban, hozzáadtam az összes új kódot az alábbi új indexoldalról.

 
 
 
2011. október Shots
 
 
 
 
Első kép
 
Második kép
 
Harmadik kép
 
Negyedik kép
 
 
  
   

A lista nézetben lévő összes horgony hivatkozás ugyanarra a fájlra mutat - index.php. De elhaladunk a paraméterben imgid kérésváltozóként. A image.php fájlban az azonosítót és a 4 előre beállított értéket teszteljük. Ha bármelyik mérkőzés megegyezik, akkor a megfelelő kép URL-címét és címét használjuk.

Image Loader Script

A image.php parancsfájlnak még mindig van a kódban hozzáadott alapértelmezett jQuery mobil sablon. Valójában egy nagyon hasonló fejlécet és láblécet oszt meg, kivéve a hátsó link attribútum hozzáadását data-add-back-BTN = "true". Figyelem: ez a gomb csak akkor jelenik meg, ha az index.html-ből származik! Próbálja ki közvetlenül a image.php betöltését, és semmi sem jelenik meg, mivel nincs “hát” lépni.

Azt hiszem, hogy a PHP logikájával először megvizsgálhatnánk a kódot. Használjuk a kapcsoló / ügy módszer a négy különböző azonosító ellenõrzéséhez, és fejléc cím, kép URL és eredeti művészforrás-hivatkozás biztosítása.

Minden meglehetősen egyszerűnek tűnik - még a kezdő PHP devnek is képesnek kell lennie követni! És ha nem érti, hogy ez nem fontos a jQuery kód számára, ezért ne aggódj. Most váltanunk kell, és nézd meg az új lapon épített sablont. Az összes HTML kódot a fenti PHP blokk után adjuk hozzá. Az ID azonosítóját használtam “képek” a konténerhez, és még a fejlécet is beállíthatja, hogy minden új fényképhez módosítsa.

 
 
 
 
 
 Az eredeti megtekintése
 
 
  
 

Valószínűleg látni fogja, milyen egyszerű ez a demó. De az egész célja a jQuery mobil méretezhetőségének bemutatása. A PHP könnyedén hozzáadható a keverékhez, és néhány nagyon szép alkalmazást csak néhány órányi fejlesztéssel tud kivenni.

Fancy Design a lista miniatűrökkel

Egy utolsó hozzáadott hatás, amit megvalósíthatunk, a bélyegképek használata a listázási oldal élénkítésére. A szöveget egy fejléc és leírás mezőbe is osztom, hogy megjelenítsem mind a műalkotás címét, mind az előadó nevét.

A Photoshop megnyitása és 80 × 80 px méretű dokumentum létrehozása. Gyorsan átméretezem az egyes képeket és mentem a miniatűröket, hogy megfeleljenek mindegyiknek. Ezután frissítjük a listanézet elemeket, és még néhány elemet kell tartalmaznunk.

Nézze meg az alábbi kódot és a demó példámat, hogy lássam, mit értem.

[Élő bemutató előnézete]

 
 
  
Wunderkit feladatok
 
Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
Scott Hill
 
  
Fórum app a Facebook
 
által Ionut Zamfir
 
  
Twitter
 
Sam Jones
 
 
 

Az osztályok ui-li-címsor és ui-li-desc alapértelmezés szerint hozzáadódik a jQuery Mobile stíluslaphoz. Ez hasonló a képosztályhoz ui-li-thumb amely automatikusan átméretezi az egyes lista nézet oszlopokat a képmagasságnak megfelelően. Mostantól tovább építhetsz a frontenden animációkkal, oldalhatásokkal, stíluslapokkal stb.

Vagy másként elkezdheti a háttérrendszer létrehozását az új képek feltöltéséhez, és automatikusan kicsinyítheti a miniatűröket a listába. A jQuery Mobile-nak annyi rugalmassága van, hogy szinte nem tudod címkézni csak JavaScript könyvtárként. Ez inkább egy teljes HTML5 / CSS / jQuery keretrendszer gyors és méretezhető mobilalkalmazások létrehozásához.

Következtetés

A cikk írása óta a jQuery Mobile csapat hivatalosan kiállította az RC1.0 kódot a kódkönyvtárból. Ez azt jelenti, hogy a legtöbb, ha nem minden nagy hiba javításra került, és most a tesztelők teljes körű kiadásra készülnek. Emiatt nem talál egy csomó információt az interneten.

De mivel a hónapok elején a webfejlesztők biztosan fel fogják venni a trendet. A mobil alkalmazások és még a mobil webes elrendezések egyre népszerűbbek az okostelefonok hatalmas növekedésével. A webfejlesztőknek nincs ideje megtanulni egy teljes programozási nyelvet az Android / iOS alkalmazások létrehozásához. Így a jQuery Mobile egy vékony alternatíva, amely magában foglalja a mobil iparági szoftverek többségének támogatását, és naponta tovább növekszik egy aktív fejlesztői közösséggel.