Proiectarea aplicațiilor mobile / Navigarea în clădirea Dev cu jQuery

Telefoanele inteligente sunt acum echipate cu browsere web foarte eficiente. JavaScript este mai puternic decât oricând și poate fi extins cu ajutorul bibliotecilor de cod, cum ar fi jQuery. Când adăugați cele mai recente specificații HTML5 / CSS3, este posibil să construiți aplicații Web mobile foarte clare, cu un anumit cod frontal de bază.

În acest tutorial vă voi arăta cum puteți construi un site web / webapp pe bază de mobil. Vom utiliza interogările media CSS3 pentru direcționarea anumitor dispozitive și rezoluții ale ecranului. În plus, un jQuery vă ajută să animați meniul și să încărcați conținutul paginii externe utilizând apelurile Ajax. Chiar mai bine, aspectul poate chiar să se extindă pentru a fi afișat corespunzător în browserele desktop obișnuite, cum ar fi Chrome sau Firefox.

• Live Demo
• Cod sursa

Definirea structurii paginilor

Să începem mai întâi să navigăm peste pagina HTML și să o stilizăm folosind câteva reguli CSS. Voi trece peste majoritatea meta-tagurilor neobișnuite din antet, deoarece acestea nu afectează direct aplicația web. Cu toate acestea, sunt câteva care ar trebui să menționez, și anume din fragmentul de mai jos:

X-UA-Compatibil este folosit pentru a descrie modul în care documentul dvs. ar trebui să redea în anumite browsere. Este un scenariu interesant în ceea ce privește codificarea în HTML5, așa că nu mă voi preocupa prea mult de acest lucru. Cu toate acestea, meta viewport eticheta este foarte importantă. Setează fereastra browserului mobil la 100% în loc de efectul de mărire standard.

De asemenea, este posibil să dezactivați apropierea de utilizator cu valoarea conținutului -Utilizator scalabilă = nu. Dar, în acest caz, dorim doar să setăm lățimea întregului ecran să fie aceeași cu lățimea dispozitivului. Etichetele aplicației Apple web vor permite salvarea paginii web ca pictogramă a ecranului de pornire pe iPhone sau iPod Touch. Nu este absolut necesar, dar cu siguranță merită să aibă.

Conținutul interior al corpului

În interiorul etichetei corpului am creat un div wrap cu ID-ul #W. Înăuntru am rupt structura în două diviziuni folosind ID-uri #pagebody și #navmenu. Întreaga lățime a paginii este limitată la 640 de pixeli, astfel încât aspectul să scadă la un număr strict.

 
  
HK Mobile
 
 
 
Bine ați venit pe site-ul Mobile!
 
 
 
 
 
Meniu Legături
 
 
 
Acasă
 
Despre noi
 
face publicitate
 
Scrieți pentru noi
 
Contacte
 
Politica de confidentialitate
 
 
 

Meniul de navigare are o valoare inferioară a indexului z, astfel încât #pagebody este întotdeauna în partea de sus. Acest lucru este crucial, deoarece codul JavaScript va aluneca peste corpul paginii un anumit număr de pixeli pentru a dezvălui navigația dedesubt.

Am folosit un simbol hash (#) în fața fiecărei pagini .html pentru a opri unele comportamente proaste în Mobile Safari. Ori de câte ori faceți clic pe un link, bara de adrese URL apare și împinge conținutul. Dar când se face referire la un ID, nu se reîncarcă nimic decât prin apelurile JavaScript.

Poziționarea CSS

Nu există o mulțime de conținut confuz în interiorul codului nostru CSS. Majoritatea poziționării se face manual și apoi se manipulează prin jQuery. Dar există câteva piese interesante în documentul nostru.

/ ** @ grupul de bază al grupului ** / #w #pagebody poziție: relativă; stânga: 0; max-lățime: 640px; min-lățime: 320 pixeli; z-index: 99999;  #w #navmenu background: # 475566; înălțime: 100%; afișare: bloc; pozitie: fixa; lățime: 300px; stânga: 0px; top: 0px; z-index: 0; 

Acest segment de vârf definește stiluri pentru ambele secțiuni ale paginii. Meniul nostru de navigare este de numai 300 de pixeli lățime, astfel încât acest lucru lasă puțin spațiu pentru ca conținutul paginii să fie încă văzut. Butonul de deschidere / închidere este de asemenea situat direct pe partea stângă și este întotdeauna accesibil. Partea importantă aici este valoarea proprietății indexului z și utilizarea pozitie: fixa; pe navmenu.

Antetul superior al barei de instrumente este, de asemenea, o secțiune interesantă. Aceasta este setată la o poziție fixă, astfel încât să se deruleze cu conținutul paginii. Acest lucru reproduce un efect similar celui pe care îl veți găsi în orice bară de titlu a aplicației iOS.

/ ** @ antetul grupului ** / #w #pagebody antet # toolbarnav display: block; pozitie: fixa; stânga: 0px; top: 0px; z-index: 9999; fundal: # 0b1851 url ('img / tabbar-solid-bg.png') sus stânga no-repeat; raza de graniță: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; - raza de graniță: 5px; raza de jos-dreapta-dreapta: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; raza de la extremitatea stanga-stanga: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; înălțime: 44px; lățime: 100%; max-lățime: 640px;  #w # pagină antet # toolbarnav h1 text-align: center; padding-top: 10px; padding-right: 40px; culoare: # e6e8f2; font-weight: bold; font-size: 2.1; text-shadow: 1px 1px 0px # 313131; 

Reguli mobile

Este ușor de observat că folosesc și o imagine de fundal pentru textura albastră a barei de antet. Aceasta este dimensionată la 640 × 44 pixeli pentru a păstra structura consistentă a layout-ului. Dar am dezvoltat, de asemenea, o imagine @ 2x pentru ecranele iPhone / iPad retinei. Puteți vedea ambele imagini de mai jos sau le puteți lua din codul sursă demo.

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

Am setat CSS mobil pentru această funcționalitate într-un alt fișier numit responsive.css. Acesta conține două interogări media care înlocuiesc bara de titlu bg și pictograma butonului de meniu pentru dispozitivele retinei.

/ ** ecranul retinei ** / doar ecranul @media și (-webkit-min-device-pixel-ratio: 2), doar ecranul și (min-moz-device-pixel-ratio: 1.5) min-device-pixel-ratio: 1.5) #w #pagebody antet background: # 0b1851 url ('img/[email protected] ') sus stânga no-repeat; dimensiune de fundal: 640 px 44px;  #w #pagebody antet # meniu-btn background: url ('img/[email protected] ') no-repeat; dimensiune de fundal: 53px 30px; 

Proiectarea săgeților din meniu

În zona de navigare am inclus, de asemenea, o mică pictogramă săgeată spre partea dreaptă a fiecărui link de meniu. Acest lucru poate fi ușor înlocuit cu o imagine din orice lucrare creativă comună. Dar, în cea mai mare parte, toți actorii CSS3 vor dori să testeze această metodă.

#w #navmenu ul li a :: după content: "; display: block; width: 6px; height: 6px; border-right: 3px solid # d0d0d8; frontieră: 3px solid # d0d0d8; : 30px; top: 45%; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); ul li a: hover :: după border-color: # cad0e6;

Folosim transforma proprietate pentru a crea o frontieră mică după conținut. De asemenea, am setat poziția: absolută; astfel încât să putem muta liber aceste frontiere în jurul elementului de legătură internă. Este foarte ușor să schimbați culoarea frontală într-o stare de hover, care oferă un sentiment mai dinamic. Este destul de incredibil ceea ce puteți realiza doar prin utilizarea regulilor de bază HTML5 și CSS3.

Dar acum hai să ne mutăm în biții și bucăți de cod JavaScript. Rețineți că acest lucru necesită includerea în biblioteca jQuery pentru ca codul meu să funcționeze corect.

jQuery Animated

În scris, aceste coduri personalizate am creat un document nou numit script.js. Simțiți-vă liber să le scrieți direct > etichete sau puteți descărca exemplul meu din codul sursă demo.

$ (document) .ready (funcție () var pagebody = $ ("#casăbody"); var themenu = $ ("#navenu"); var varbar = # vartentport = width: $ (window) .width (), height: $ (window) .height (); // returnați variabilele ca // viewport.width / viewport.height 

funcția openme () $ (funcția () topbar.animate (stânga: "290px", duration: 300, coada: false); , coadă: falsă););  function closite () var closeme = $ (function () topbar.animate left: "0px", duration: 180, queue: false durată: 180, coadă: falsă);); 

// încărcarea conținutului paginii pentru navigare $ ("a.navlink") live ("click", funcția (e) e.preventDefault (); var linkurl = $ (this) .attr ("href" = linkurl.substring (1, linkurl.length); var imgloader = '„; 

closeme (); $ (funcția () topbar.css ("top", "0px"); window.scrollTo (0, 1););

content.html (imgloader); setTimeout (funcția () content.load (linkhtmlurl, funcția () / * no callback * /), 1200);