Mobilalkalmazás-tervezés / Dev építés navigáció a jQuery segítségével

Az okostelefonok most már nagyon hatékony webböngészőkkel vannak felszerelve. A JavaScript sokkal erősebb, mint valaha, és a kódkönyvtárak, például a jQuery segítségével bővíthető. Ha hozzáadja a legújabb HTML5 / CSS3 specifikációkat, nagyon bonyolult mobil webalkalmazásokat építhetsz be néhány alapvető frontend kóddal.

Ebben a bemutatóban megmutatom, hogyan lehet létrehozni egy mobil alapú webhelyet / webappot. CSS3 média lekérdezéseket fogunk használni bizonyos eszközök és képernyőfelbontások célzásához. Plusz egy kicsit a jQuery segít a menü animálásában, és külső oldal tartalmak betöltésére az Ajax hívások segítségével. Még jobb, ha az elrendezés akár a rendszeres asztali böngészőkben, például a Chrome-ban vagy a Firefoxban is jól megjeleníthető.

• Élő demó
• Forráskód

Az oldalszerkezet meghatározása

Kezdjük először a HTML oldalon, és néhány CSS szabály használatával stílusosítjuk. Átugorom a fejlécben lévő szokatlan meta-címkék többségét, mivel ezek nem befolyásolják közvetlenül a webalkalmazást. Néhányat említenem kell, nevezetesen az alábbi részletből:

X-UA-kompatibilis leírja, hogy a dokumentum milyen böngészőkben jelenjen meg. Ez egy érdekes forgatókönyv a HTML5 kódolásakor, ezért nem aggódnék túl sokat erről. Azonban a meta nézetablakban címke nagyon fontos. A szabványos nagyított hatás helyett 100% -ra állítja a mobil böngészőablakot.

Lehetőség van a felhasználói zoom letiltására a tartalmi értékkel felhasználó skálázható = nincs. Ebben az esetben azonban csak azt szeretnénk beállítani, hogy a teljes képernyő szélessége megegyezzen a készülék szélességével. Az Apple webes alkalmazáscímkék lehetővé teszik, hogy a webhely kezdőképernyőként elmenthető legyen az iPhone vagy iPod Touch készülékére. Nem teljesen szükséges, de biztosan érdemes.

Belső testtartalom

A testcímke belsejében egy azonosítóval ellátott csomagoló divatot állítok be #W. A belsejében az ID-ek használatával még két osztássá váltam az elrendezést #pagebody és #navmenu. A teljes oldal szélessége 640px-re korlátozódik, így az elrendezés szigorú számra változik.

 
  
HK Mobile
 
 
 
Üdvözöljük a mobil oldalon!
 
 
 
 
 
Menü linkek
 
 
 
itthon
 
Rólunk
 
Hirdet
 
Írjon nekünk
 
Kapcsolatok
 
Adatvédelmi irányelvek
 
 
 

A navigációs menü alacsonyabb z-index értéket kap, így #pagebody mindig a tetején van. Ez azért fontos, mert a JavaScript kód egy bizonyos számú pixelre csúszik az oldal testén, hogy felfedje az alatti navigációt.

Mindegyik .html oldal előtt hash szimbólumot (#) használtam, hogy megakadályozzuk a Mobile Safari néhány rossz viselkedését. Ha rákattint egy linkre, megjelenik az URL sáv, és megnyomja a tartalmat. Azonban ha egy azonosítót hivatkozunk, a JavaScript-hívásokon keresztül semmit nem tölti be újra.

CSS pozicionálás

A CSS kódunkban nincs sok zavaró tartalom. A pozícionálás nagy része kézzel történik, majd a jQuery segítségével manipulálható. De van néhány érdekes darab a dokumentumunkban.

/ ** @ csoportcsoport test ** / #w #pagebody pozíció: relatív; balra: 0; max. szélesség: 640px; min-szélesség: 320px; z-index: 99999;  #w #navmenu háttér: # 475566; magasság: 100%; kijelző: blokk; pozíció: fix; szélesség: 300px; balra: 0px; top: 0px; z-index: 0; 

Ez a felső szegmens az oldal mindkét részének stílusait határozza meg. A mi navigációs menüünk csak 300-szor széles, így ez egy kis helyet hagy az oldal tartalmának megjelenítéséhez. A nyitott / záró menü gomb közvetlenül a bal oldalon található, és mindig elérhető. A fontos darab itt a z-index tulajdonság értéke és használata pozíció: fix; a navigációs rendszerünkön.

A felső eszköztár fejléc is érdekes szakasz. Ez egy fix pozícióra van állítva, így görgetni fog az oldal tartalmával. Ez hasonló hatást mutat, mint bármelyik iOS alkalmazás címsorában.

/ ** @group fejléc ** / #w #pagebody header # toolbarnav display: block; pozíció: fix; balra: 0px; top: 0px; z-index: 9999; háttér: # 0b1851 url ('img / tabbar-solid-bg.png') bal felső sarok nélküli; határ-sugár: 5px; -moz-határ-sugár: 5px; -webkit-border-radius: 5px; -o-határ-sugár: 5px; határ-alsó-jobb sugár: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-sugár: 0; határ-alsó-bal-sugár: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-sugár: 0; magasság: 44px; szélesség: 100%; max. szélesség: 640px;  #w #pagebody header # toolbarnav h1 text-align: center; padding-top: 10px; párnázás-jobb: 40px; szín: # e6e8f2; font-súly: félkövér; betűméret: 2.1em; szöveg-árnyék: 1px 1px 0px # 313131; 

Mobil szabályok

Könnyen észrevehető, hogy a kék fejlécsáv textúrahoz háttérképet is használok. Ez 640 × 44 pixel méretben van, hogy a következetes elrendezési struktúrát megtartsák. De én is kifejlesztettem egy képet @ 2x iPhone / iPad retina megjelenítésére. Mindkét kép látható, vagy megragadhatja őket a demó forráskódból.

• System/demo/img/[email protected]
• System/demo/img/[email protected]

A mobil CSS-t ehhez a funkcióhoz egy másik nevű fájlban állítom be responsive.css. Két média lekérdezést tartalmaz, amelyek helyettesítik a bg címsávot és a retina eszközök menü gombjának ikonját.

/ ** retina kijelző ** / @ media only screen és (-webkit-min-device-pixel-arány: 2), csak képernyő és (min - moz-device-pixel-arány: 1,5), csak képernyő és ( min-device-pixel-arány: 1,5) #w #pagebody fejléc háttér: # 0b1851 url ('img/[email protected] ') felső balra nem ismételve; háttérméret: 640px 44px;  #w #pagebody header # menu-btn háttér: url ('img/[email protected] ') nem ismételhető; háttérméret: 53px 30px; 

Menü nyilak tervezése

A navigációs területen egy kis nyíl ikon is szerepel az egyes menüpontok jobb oldalán. Ez könnyen kicserélhető bármely kreatív grafikai képből. De többnyire minden CSS3 rajongó szeretni fogja ezt a módszert.

#w #navmenu ul li a :: után tartalom: "; kijelző: blokk; szélesség: 6px; magasság: 6px; határ-jobb: 3px szilárd # d0d0d8; határ teteje: 3px szilárd # d0d0d8; pozíció: abszolút; jobb : 30px; top: 45%; -webkit-transform: forgatás (45deg); -moz-transform: forgatás (45deg); -o-transzformáció: forgatás (45deg), transzformálás: forgatás (45deg); #w #navmenu ul li a: hover :: border-color: # cad0e6; után

Használjuk a átalakít a tartalom után létrehozhat egy kis szegélyt. Én is beállítom pozíció: abszolút; így szabadon mozgathatjuk ezeket a határokat a belső link elem körül. Szuper könnyű megváltoztatni a határszínt egy lebegő állapotban, amely dinamikusabb érzést nyújt. Elég hihetetlen, amit csak az alapvető HTML5 és CSS3 szabályokkal lehet elérni.

De most lépjünk be a JavaScript kód bitjeibe. Ne feledje, hogy ehhez szükség van a jQuery könyvtárhoz, hogy a kódom megfelelően futhasson.

jQuery Animált

Ezeknek az egyéni kódoknak a megírásakor egy teljesen új dokumentumot hoztam létre script.js. Nyugodtan írja meg ezeket közvetlenül > címkéket, vagy töltse le a példámat a demo forráskódból.

$ (dokumentum) .ready (függvény () var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" #content "); var viewport = szélesség: $ (ablak) .width (), magasság: $ (ablak) .height (); // változók letöltése // viewport.width / viewport.height 

function openme () $ (függvény () topbar.animate (left: "290px", időtartam: 300, sor: false); pagebody.animate (left: "290px", időtartam: 300 , sor: false););  function closeme () var closeme = $ (függvény () topbar.animate (left: "0px", időtartam: 180, sor: false); pagebody.animate (left: "0px", időtartam: 180, sor: false);); 

// oldal betöltése navigációhoz $ ("a.navlink"). élő ("kattintás", (e) e.preventDefault (); var linkurl = $ (ez) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = '„ 

closeme (); $ (függvény () topbar.css ("top", "0px"); window.scrollTo (0, 1););

content.html (imgloader); setTimeout (funkció () content.load (linkhtmlurl, függvény () / * nincs visszahívás * /), 1200);