Mobilní aplikace Design / Dev Building Navigation s jQuery

Smartphony jsou nyní vybaveny velmi účinnými webovými prohlížeči. JavaScript je silnější než kdy předtím a lze jej rozšířit pomocí knihoven kódů, jako je jQuery. Když přidáte nejnovější specifikace HTML5 / CSS3, je možné vytvořit velmi elegantní mobilní webové aplikace s některým základním kódem frontendu.

V tomto tutoriálu vám ukážu, jak si můžete vytvořit mobilní webovou stránku / webapp. Pro cílení na konkrétní zařízení a rozlišení obrazovky použijeme mediální dotazy CSS3. Plus trochu jQuery pomáhá animovat menu a načítat externí obsah stránek pomocí volání Ajax. A co je ještě lepší, rozvržení se může dokonce rozšířit tak, aby se správně zobrazovalo v běžných prohlížečích, jako je Chrome nebo Firefox.

• Live Demo
• Zdrojový kód

Definování struktury stránek

Začněme tím, že nejprve přejdeme na stránku HTML a upravíme ji pomocí pravidel CSS. Přeskočím většinu neobvyklých meta tagů v hlavičce, protože neovlivňují webovou aplikaci přímo. Nicméně je tu několik, které bych měl zmínit, konkrétně z úryvku níže:

Kompatibilní s X-UA se používá k popisu vykreslení dokumentu v určitých prohlížečích. Je to zajímavý scénář při kódování v HTML5, takže bych se o to moc nestaral. Nicméně meta výřez značka je velmi důležitá. Místo standardního zvětšeného efektu nastaví okno mobilního prohlížeče na 100%.

Je také možné zakázat zoom uživatele s hodnotou obsahu user-scalable = no. Ale v tomto případě chceme nastavit šířku celé obrazovky tak, aby byla stejná jako šířka zařízení. Značky webových aplikací Apple umožní, aby byly webové stránky uloženy jako ikona domovské obrazovky pro zařízení iPhone nebo iPod Touch. Není to zcela nezbytné, ale rozhodně stojí za to mít.

Vnitřní obsah těla

Uvnitř tagu těla nastavím obal s ID #w. Uvnitř jsem rozložil rozložení na dva další divs pomocí ID #pagebody a #navmenu. Šířka celé stránky je omezena na 640px podle výběru tak, aby se rozložení změnilo na přísné číslo.

 
  
HK Mobile
 
 
 
Vítejte v mobilním webu!
 
 
 
 
 
Menu Odkazy
 
 
 
Domov
 
O nás
 
Inzerovat
 
Napište pro nás
 
Kontakty
 
Zásady ochrany osobních údajů
 
 
 

Navigační menu má nižší hodnotu z-indexu #pagebody je vždy nahoře. Toto je klíčové, protože kód JavaScriptu sklouzne přes tělo stránky určitý počet pixelů, aby odhalil navigaci pod ním.

Před každou stránkou .html jsem použil symbol hash (#), abych zastavil nějaké špatné chování v aplikaci Mobile Safari. Kdykoli byste klikli na odkaz, zobrazí se panel s adresou URL a obsah se posune dolů. Ale když odkazujete na ID, nic se nenahraje s výjimkou volání JavaScriptu.

CSS Polohování

V našem CSS kódu není mnoho matoucího obsahu. Většina polohování se provádí ručně a pak se s nimi manipuluje pomocí jQuery. V našem dokumentu je však několik zajímavých kousků.

/ ** @ group core body ** / #w #pagebody position: relativní; vlevo: 0; max-width: 640px; min-width: 320px; z-index: 99999;  #w #navmenu background: # 475566; výška: 100%; zobrazení: blok; poloha: pevná; šířka: 300px; vlevo: 0px; nahoru: 0px; z-index: 0; 

Tento horní segment definuje styly pro obě části stránky. Naše nav menu je jen 300px široké, takže to ponechává trochu prostor pro obsah stránky, aby ještě být viděn. Tlačítko Otevřít / Zavřít menu je také umístěno přímo na levé straně a vždy přístupné. Důležité je zde hodnota vlastnosti z-index a použití poloha: pevná; na naší navmenu.

Zajímavá je také záhlaví hlavního panelu nástrojů. To je nastaveno na pevnou pozici, takže se bude posouvat s obsahem stránky. To replikuje podobný účinek, jaký byste našli v libovolném záhlaví aplikace pro systém iOS.

/ ** @ group header ** / #w #pagebody header # toolbarnav zobrazit: blok; poloha: pevná; vlevo: 0px; nahoru: 0px; z-index: 9999; pozadí: # 0b1851 url ('img / tabbar-solid-bg.png') nahoru vlevo bez opakování; hraniční rádius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; hrana-dolní-pravý-rádius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; okraj-dolní-levý rádius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; výška: 44px; šířka: 100%; max-width: 640px;  #w #pagebody záhlaví # toolbarnav h1 text-align: center; polstrování: 10px; pravý polstrování: 40px; barva: # e6e8f2; font-weight: tučné; velikost písma: 2.1em; text-shadow: 1px 1px 0px # 313131; 

Mobilní pravidla

Je snadné si všimnout, že používám také obrázek pozadí pro texturu modrého záhlaví. To má velikost 640 × 44 pixelů, aby byla zachována konzistentní struktura rozložení. Ale také jsem vyvinul image @ 2x pro displeje sítnice iPhone / iPad. Můžete vidět oba obrázky níže, nebo si je můžete vzít z mého demo zdrojového kódu.

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

Nastavím mobilní CSS pro tuto funkci v jiném souboru s názvem responsive.css. Obsahuje dva mediální dotazy, které nahrazují titulní pruh bg a ikonu tlačítka nabídky pro zařízení sítnice.

/ ** displej sítnice ** / @ pouze obrazovka s médii a (-webkit-min-device-pixel-ratio: 2), pouze obrazovka a (min - moz-device-pixel-ratio: 1,5), pouze obrazovka a ( min-device-pixel-ratio: 1.5) #w #pagebody header background: # 0b1851 url ('img/[email protected] ') nahoru vlevo bez opakování; velikost pozadí: 640px 44px;  #w #pagebody header # menu-btn background: url ('img/[email protected] ') no-repeat; velikost pozadí: 53px 30px; 

Navrhování šipek menu

V navigační oblasti jsem také přidal malou ikonu šipky na pravé straně každého odkazu nabídky. To lze snadno nahradit obrazem ze všech uměleckých děl. Ale hlavně všichni CSS3 nadšenci budou tuto metodu zkoušet.

#w #navmenu ul li a :: after content: "; display: block; width: 6px; height: 6px; border-right: 3px pevné # d0d0d8; border-top: 3px pevné # d0d0d8; pozice: absolutní; vpravo : 30px; top: 45%; -webk-transformace: rotace (45deg); -moz-transformace: rotace (45deg); -o-transformace: rotace (45deg); transformace: rotace (45deg); #w #navmenu ul li a: hover :: after border-color: # cad0e6;

Používáme přeměnit vlastnost vytvořit malý okraj za obsahem. Také jsem nastavit pozice: absolutní; tak můžeme tyto okraje volně pohybovat kolem vnitřní spojovací položky. Je to super snadné změnit barvu hranic na vznášející se stav, který nabízí dynamičtější pocit. Je to neuvěřitelné, co můžete dosáhnout jen pomocí základních pravidel HTML5 a CSS3.

Ale teď se přesuneme do bitů a kousků kódu JavaScript. Nezapomeňte, že je nutné zahrnout do knihovny jQuery, aby můj kód správně fungoval.

jQuery Animované

Při psaní těchto vlastních kódů jsem vytvořil zcela nový dokument s názvem script.js. Nebojte se napsat přímo do > nebo stáhnout můj příklad z demo zdrojového kódu.

$ (document) .ready (function () var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" #content "); var viewport = width: $ (window) .width (), height: $ (window) .height (); // načíst proměnné jako // viewport.width / viewport.height 

function openme () $ (function () topbar.animate (vlevo: "290px", trvání: 300, fronta: false); pagebody.animate (vlevo: "290px", trvání: 300 , fronta: false););  function closeme () var closeme = $ (function () topbar.animate (vlevo: "0px", trvání: 180, fronta: false); pagebody.animate (left: "0px", trvání: 180, fronta: false);); 

// načítání obsahu stránky pro navigaci $ ("a.navlink") live ("click", funkce (e) e.preventDefault (); var linkurl = $ (this) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = '"; 

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

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