Navrhovanie mobilných aplikácií / navigácia v budovách s jQuery

Smartphony sú teraz vybavené niekoľkými veľmi efektívnymi webovými prehliadačmi. JavaScript je výkonnejší než kedykoľvek predtým a môže byť rozšírený pomocou knižníc kódov, ako je jQuery. Keď pridáte najnovšie špecifikácie HTML5 / CSS3, je možné vytvoriť veľmi elegantné mobilné webové aplikácie s určitým základným kódom frontend.

V tomto návode ukážem, ako môžete vytvoriť webovú stránku / webapp založenú na mobilných zariadeniach. Budeme používať dotazy médií CSS3 na zacielenie na konkrétne zariadenia a rozlíšenie obrazovky. Plus trochu jQuery pomáha animovať menu a načítať externý obsah stránky pomocou Ajax volaní. Ešte lepšie je, že rozloženie sa dokonca môže rozšíriť tak, aby sa správne zobrazovalo v bežných prehľadávačoch stolných počítačov, ako sú prehliadače Chrome alebo Firefox.

• Live Demo
• Zdrojový kód

Definovanie štruktúry stránky

Začnime tým, že najprv prejdeme na stránku HTML a štýl ju použijeme pomocou niektorých pravidiel CSS. Preskočím väčšinu nezvyčajných metaznačiek v hlavičke, pretože priamo neovplyvňujú webovú aplikáciu. Existuje však niekoľko z nich, ktoré by som mal spomenúť, a to z úryvkov uvedených nižšie:

X-UA-Compatible sa používa na popísanie spôsobu, akým má dokument vykresľovať v určitých prehliadačoch. Je to zaujímavý scenár pri kódovaní v jazyku HTML5, takže by som sa o to moc netrápil. Avšak meta výrez značka je veľmi dôležitá. Nastaví okno mobilného prehliadača na 100% namiesto štandardného zväčšeného efektu.

Je tiež možné zakázať priblíženie používateľa s hodnotou obsahu Užívateľ škálovateľného = no. V tomto prípade však chceme nastaviť šírku celej obrazovky tak, aby bola rovnaká ako šírka nášho zariadenia. Značky webových aplikácií spoločnosti Apple umožnia, aby sa webové stránky ukladali ako ikona domovskej obrazovky do vášho zariadenia iPhone alebo iPod Touch. Nie je to úplne potrebné, ale rozhodne stojí za to mať.

Vnútorný obsah tela

Vo vnútri značky tela som nastavil obal div s ID #W. Vnútri som rozložil rozloženie na dve ďalšie čísla pomocou ID #pagebody a #navmenu. Celá šírka stránky je obmedzená na 640 pixelov podľa voľby, takže rozloženie mierky na prísne číslo.

 
  
HK Mobile
 
 
 
Vitajte na stránkach pre mobilné zariadenia!
 
 
 
 
 
Odkazy v ponuke
 
 
 
Domov
 
O nás
 
inzerovať
 
Napíšte nám
 
kontakty
 
Zásady ochrany osobných údajov
 
 
 

Navigačné menu má nižšiu hodnotu z-index tak, že #pagebody je vždy na vrchole. To je kľúčové, pretože kód JavaScript posunie cez telo stránky určitý počet pixelov, aby odhalil navigáciu pod ním.

Použil som znak hash (#) pred každou stránkou .html, aby som zastavil nejaké zlé správanie v službe Mobile Safari. Kedykoľvek kliknete na odkaz, objaví sa panel s adresou URL a stlačí obsah. Keď sa však odkazuje na identifikátor, nič sa znovu načíta, iba prostredníctvom volaní v jazyku JavaScript.

CSS Positioning

V našom CSS kóde nie je veľa mätúceho obsahu. Väčšina polohovania sa robí ručne a potom sa manipuluje prostredníctvom jQuery. Ale v našom dokumente je niekoľko zaujímavých kúskov.

/ ** @group core body ** / #w #pagebody pozícia: relatívna; vľavo: 0; max-šírka: 640px; min-šírka: 320 pixlov; z-index: 99999;  #w #navmenu pozadie: # 475566; výška: 100%; zobrazenie: blok; pozícia: pevná; šírka: 300px; vľavo: 0px; top: 0px; z-index: 0; 

Tento horný segment definuje štýly pre obe časti stránky. Náš navigačný menu je len 300 pixelov široký, takže ponecháva priestor na to, aby obsah stránok bol stále viditeľný. Tlačidlo otvorenia / zatvorenia sa nachádza tiež priamo na ľavej strane a je vždy prístupné. Dôležitým dielom je hodnota vlastnosti z-indexu a jeho použitie pozícia: pevná; na našom navmenu.

Horná časť hlavičky panelu nástrojov je tiež zaujímavá časť. Toto nastavenie je nastavené na pevnú pozíciu, takže sa bude pohybovať s obsahom stránky. Toto replikuje podobný efekt, aký by ste našli v ľubovoľnom záhlaví aplikácie pre systém iOS.

/ ** @group header ** / #w #pagebody hlavička # toolbarnav display: block; pozícia: pevná; vľavo: 0px; top: 0px; z-index: 9999; pozadie: # 0b1851 url ('img / tabbar-solid-bg.png') vľavo hore no-repeat; polomer okrajov: 5 pixlov; -moz-okraj-polomer: 5px; -webkit-border-radius: 5px; okraj okrajov: 5px; okraj spodného-pravého okraja: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; polomer okraja vľavo a vpravo: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; výška: 44px; šírka: 100%; max-šírka: 640px;  #w #pagebody hlavička # toolbarnav h1 text-align: center; polstrovanie top: 10px; padding-right: 40px; farba: # e6e8f2; font-weight: tučné; veľkosť písma: 2,1; textový tieň: 1px 1px 0px # 313131; 

Pravidlá pre mobilné zariadenia

Je ľahké si všimnúť, že používam aj obrázok pozadia pre textúru s modrou hlavičkou. Táto veľkosť je 640 × 44 pixelov, aby bola zachovaná konzistentná štruktúra rozloženia. Ale tiež som vyvinul obrázok @ 2x pre displeje pre iPhone / iPad. Môžete vidieť oba obrázky nižšie, alebo ich chytiť z môjho demo zdrojového kódu.

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

Nastavil som mobilný CSS pre túto funkciu v inom menovanom súbore responsive.css. Obsahuje dve otázky týkajúce sa médií, ktoré nahrádzajú záhlavie bg a ikonu tlačidla ponuky pre zariadenia so sietnicami.

/ ** obrazovka obrazovky ** / iba média a (-webkit-min-device-pixel-ratio: 2), len obrazovka a (min-moz-device-pixel-ratio: 1.5) min-device-pixel-ratio: 1.5) #w #pagebody hlavička background: # 0b1851 url ('img/[email protected] ') vľavo hore no-repeat; veľkosť pozadia: 640px 44px;  #w #pagebody hlavička # menu-btn background: url ('img/[email protected] ') no-repeat; veľkosť pozadia: 53px 30px; 

Navrhovanie šípok ponuky

V navigačnej oblasti som tiež malú ikonu so šípkou na pravej strane každého odkazu na menu. To možno ľahko nahradiť obrázkom z ľubovoľného umeleckého diela. Ale väčšinou všetci fanúšikovia CSS3 budú radi skúšať túto metódu.

#w #navmenu ul li a :: po obsah: "; zobrazenie: blok; šírka: 6px; výška: 6px; okraj-pravá: 3px pevná # d0d0d8; okraj: 3px pevná # d0d0d8; : 30px; top: 45%; -webkit-transform: rotácia (45deg); -moz-transform: rotácia (45deg); ul li a: pohybovať po: border-color: # cad0e6;

Používame premeniť vlastnosť vytvoriť malú hranicu po obsahu. Takisto som nastavil poloha: absolútna; takže môžeme tieto hranice voľne pohybovať okolo položky vnútorného odkazu. Je super jednoduché zmeniť farbu okrajov v stave vznášania, ktorý ponúka dynamickejší pocit. Je to dosť neuveriteľné, čo môžete dosiahnuť len pomocou základných pravidiel HTML5 a CSS3.

Ale teraz sa pohnite do kúskov kódu JavaScript. Pamätajte si, že to vyžaduje zahrnutie do knižnice jQuery, aby môj kód fungoval správne.

jQuery Animated

Pri písaní týchto vlastných kódov som vytvoril úplne nový dokument s názvom script.js. Neváhajte a napíšte ich priamo > alebo stiahnite si môj príklad zo zdrojového kódu ukážky.

$ varný panel = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav" # viewport = width: $ (window) .width (), height: $ (window) .height (); // načítať premenné ako // viewport.width / viewport.height 

funkcia () topbar.animate (left: "290px", duration: 300, queue: false), pagebody.animate (left: "290px", , fronta: falošná););  funkcia closeme () var closeme = $ (funkcia () topbar.animate (left: "0px", duration: 180, queue: false trvanie: 180, fronta: falošná);); 

// načítanie obsahu stránky pre navigáciu $ ("a.navlink") live ("kliknite", funkcia (e) e.preventDefault (); var linkurl = $ (toto) .attr ("href" = linkurl.substring (1, linkurl.length); var imgloader = ',; 

Close (); $ (funkcia () topbar.css ("top", "0px"); window.scrollTo (0, 1););

content.html (imgloader); setTimeout (funkcia () content.load (linkhtmlurl, function () / * bez spätného volania * /), 1200);