Mobile App Design / Dev Building Navigatie met jQuery

Smartphones zijn nu uitgerust met een aantal zeer efficiënte webbrowsers. JavaScript is krachtiger dan ooit en kan worden uitgebreid met behulp van codebibliotheken zoals jQuery. Wanneer u de nieuwste HTML5 / CSS3-specificaties toevoegt, is het mogelijk om zeer pittige mobiele web-apps te bouwen met een eenvoudige basiscode voor het frontend.

In deze tutorial laat ik zien hoe je een mobiel-gebaseerde website / webapp kunt bouwen. We gebruiken CSS3-mediaquery's voor het targeten van specifieke apparaten en schermresoluties. En een beetje jQuery helpt het menu te animeren en de inhoud van externe pagina's te laden met behulp van Ajax-oproepen. Nog beter, de lay-out kan zelfs worden uitgebreid om correct te worden weergegeven in normale desktopbrowsers zoals Chrome of Firefox.

• Live demonstratie
• Broncode

De paginastructuur definiëren

Laten we beginnen door eerst de HTML-pagina te doorlopen en het op te maken met behulp van enkele CSS-regels. Ik sla de meeste ongebruikelijke metatags in de koptekst over omdat ze de webapp niet rechtstreeks beïnvloeden. Er zijn er echter een paar die ik moet noemen, namelijk uit het onderstaande fragment:

X-UA-Compatible wordt gebruikt om te beschrijven hoe uw document in bepaalde browsers moet worden weergegeven. Het is een interessant scenario bij het coderen in HTML5, dus daar zou ik me niet al te veel zorgen over maken. Maar de meta uitkijk postje tag is erg belangrijk. Het zet het mobiele browservenster op 100% in plaats van het standaard ingezoomde effect.

Het is ook mogelijk om gebruikerszoom uit te schakelen met de inhoudswaarde user schaalbare = nee. Maar in dit geval willen we alleen de breedte van het volledige scherm instellen op dezelfde breedte als onze apparaatbreedte. Met de Apple-webapp-tags kan de website worden opgeslagen als startschermpictogram op je iPhone of iPod Touch. Niet helemaal noodzakelijk, maar zeker de moeite waard.

Inhoud van het innerlijke lichaam

In de body-tag heb ik een wrapper-div met de ID geplaatst #W. Binnen heb ik de lay-out verbroken in twee extra divs met ID's #pagebody en #navmenu. De volledige paginabreedte is beperkt tot 640 pixels naar keuze, zodat de lay-out schalen tot een strikt aantal.

 
  
HK Mobile
 
 
 
Welkom bij de mobiele site!
 
 
 
 
 
Menu Links
 
 
 
Huis
 
Over ons
 
Reclame maken
 
Schrijf voor ons
 
Contacten
 
Privacybeleid
 
 
 

Het navigatiemenu krijgt dus een lagere Z-indexwaarde #pagebody staat altijd bovenaan. Dit is cruciaal omdat de JavaScript-code een bepaald aantal pixels over de paginabody zal schuiven om de navigatie eronder te onthullen.

Ik heb voor elke .html-pagina een hash-symbool (#) gebruikt om slecht gedrag in Mobile Safari te stoppen. Wanneer u op een link zou klikken, verschijnt de URL-balk en verlaagt de inhoud. Maar wanneer naar een ID wordt verwezen, wordt niets opnieuw geladen, behalve via JavaScript-aanroepen.

CSS positionering

Er zit niet heel veel verwarrende inhoud in onze CSS-code. Het grootste deel van de positionering wordt handmatig gedaan en vervolgens gemanipuleerd via jQuery. Maar er zijn een paar interessante stukken in ons document.

/ ** @group core body ** / #w #pagebody position: relative; links: 0; maximale breedte: 640 px; minimale breedte: 320 px; z-index: 99999;  #w #navmenu background: # 475566; hoogte: 100%; weergave: blok; positie: vast; breedte: 300 px; links: 0px; top: 0px; z-index: 0; 

Dit topsegment definieert stijlen voor beide secties van de pagina. Ons nav-menu is slechts 300 px breed, dus dit laat een beetje ruimte over om de pagina-inhoud nog te zien. De open / dicht-menuknop bevindt zich ook direct aan de linkerkant en is altijd toegankelijk. Het belangrijke stuk hier is de waarde van de z-index-eigenschap en het gebruik ervan positie: vast; op ons navmenu.

De bovenste werkbalkkop is ook een interessante sectie. Dit is ingesteld op een vaste positie, zodat het met de pagina-inhoud schuift. Hiermee wordt hetzelfde effect gerepliceerd als in de titelbalk van een iOS-app.

/ ** @group header ** / #w #pagebody header # toolbarnav display: block; positie: vast; links: 0px; top: 0px; z-index: 9999; achtergrond: # 0b1851 url ('img / tabbar-solid-bg.png') linksboven niet herhalen; grensradius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; grens-onder-links radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; hoogte: 44px; breedte: 100%; maximale breedte: 640 px;  #w #pagebody header # toolbarnav h1 text-align: center; padding-top: 10px; opvulling rechts: 40px; kleur: # e6e8f2; lettertype: vet; font-size: 2.1em; tekstschaduw: 1px 1px 0px # 313131; 

Mobiele regels

Het valt gemakkelijk op te merken dat ik ook een achtergrondafbeelding gebruik voor de blauwe headerbalkstructuur. Deze heeft een formaat van 640 × 44 pixels om bij de consistente lay-outstructuur te blijven. Maar ik heb ook een afbeelding @ 2x ontwikkeld voor retina-displays van de iPhone / iPad. Je kunt beide onderstaande afbeeldingen zien of ze pakken uit mijn demo-broncode.

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

Ik heb de mobiele CSS voor deze functionaliteit ingesteld in een ander bestand met de naam responsive.css. Het bevat twee mediaquery's die de titelbalk bg en het menuknoppenpictogram voor retina-apparaten vervangen.

/ ** Retina-display ** / @media alleen scherm en (-webkit-min-apparaat-pixel-ratio: 2), alleen scherm en (min-moz-apparaat-pixel-ratio: 1,5), alleen scherm en ( min-device-pixel-ratio: 1.5) #w #pagebody header background: # 0b1851 url ('img/[email protected] ') linksboven niet herhalen; achtergrondgrootte: 640 px 44px;  #w #pagebody header # menu-btn background: url ('img/[email protected] ') geen herhaling; achtergrondgrootte: 53 px 30 px; 

Het ontwerpen van menupijlen

In het navigatiegebied heb ik ook een klein pijlpictogram toegevoegd aan de rechterkant van elke menulink. Dit kan eenvoudig worden vervangen door een afbeelding uit een kunstwerk van creatieve commons. Maar vooral alle CSS3-liefhebbers zullen deze methode graag uitproberen.

#w #navmenu ul li a :: na content: "; display: block; width: 6px; height: 6px; border-right: 3px solid # d0d0d8; border-top: 3px solid # d0d0d8; position: absolute; right : 30px; top: 45%; -webkit-transformatie: roteren (45deg); -moz-transform: roteren (45deg); -o-transform: roteren (45deg); transformeren: roteren (45deg); #w #navmenu ul li a: hover :: after border-colour: # cad0e6;

We gebruiken de transformeren eigenschap om een ​​kleine rand na de inhoud te maken. Ik heb ook ingesteld positie: absoluut; zodat we deze grenzen vrij kunnen verplaatsen rond het binnenste linkitem. Het is supereenvoudig om de randkleur bij een zweeftoestand te veranderen, wat een dynamischer gevoel geeft. Het is behoorlijk ongelofelijk wat je kunt bereiken door de eenvoudige HTML5- en CSS3-regels te gebruiken.

Maar laten we nu eens kijken naar de stukjes en beetjes JavaScript-code. Onthoud dat dit een include vereist voor de jQuery-bibliotheek zodat mijn code correct werkt.

jQuery Geanimeerd

Bij het schrijven van deze aangepaste codes heb ik een nieuw document gemaakt met de naam script.js. Schrijf deze gerust in > tags of download mijn voorbeeld uit de demobroncode.

$ (document) .ready (function () var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" #content "); var viewport = width: $ (window) .width (), height: $ (window) .height (); // haal variabelen op als // viewport.width / viewport.height 

function openme () $ (function () topbar.animate (left: "290px", duration: 300, queue: false); pagebody.animate (left: "290px", duration: 300 , wachtrij: false););  function closeme () var closeme = $ (function () topbar.animate (left: "0px", duration: 180, queue: false); pagebody.animate (left: "0px", duration: 180, queue: false);); 

// inhoud van de pagina laden voor navigatie $ ("a.navlink"). live ("klik", functie (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);