Mobile App Design / Dev Building Navigation mit jQuery
Smartphones sind jetzt mit sehr effizienten Webbrowsern ausgestattet. JavaScript ist leistungsfähiger als je zuvor und kann mit Hilfe von Codebibliotheken wie jQuery erweitert werden. Wenn Sie die neuesten HTML5 / CSS3-Spezifikationen hinzufügen, ist es möglich, mobile Web-Apps mit ein paar einfachen Frontend-Codes zu erstellen.
In diesem Tutorial zeige ich Ihnen, wie Sie eine mobile Website / Webapp erstellen können. Wir verwenden CSS3-Medienabfragen für das Targeting auf bestimmte Geräte und Bildschirmauflösungen. Ein wenig jQuery hilft dabei, das Menü zu animieren und externen Seiteninhalt mit Ajax-Aufrufen zu laden. Das Layout kann sogar erweitert werden, um in normalen Desktop-Browsern wie Chrome oder Firefox korrekt dargestellt zu werden.
- Live Demo
- Quellcode
Seitenstruktur definieren
Beginnen wir damit, zuerst die HTML-Seite durchzugehen und sie mit einigen CSS-Regeln zu gestalten. Ich werde die meisten ungewöhnlichen Meta-Tags in der Kopfzeile überspringen, da sie die Web-App nicht direkt betreffen. Es gibt jedoch einige, die ich erwähnen sollte, und zwar aus dem folgenden Ausschnitt:
X-UA-kompatibel Beschreibt, wie Ihr Dokument in bestimmten Browsern dargestellt werden soll. Es ist ein interessantes Szenario beim Codieren in HTML5, daher muss ich mir nicht allzu viele Sorgen machen. Jedoch die meta Sichtfenster Tag ist sehr wichtig. Das mobile Browserfenster wird auf 100% anstelle des standardmäßigen Zoomeffekts eingestellt.
Es ist auch möglich, den Benutzerzoom mit dem Inhaltswert zu deaktivieren benutzerskalierbar = nein. In diesem Fall möchten wir jedoch nur die volle Bildschirmbreite so einstellen, dass sie unserer Gerätebreite entspricht. Mit den Apple Web App-Tags kann die Website als Symbol für den Startbildschirm auf Ihrem iPhone oder iPod Touch gespeichert werden. Nicht unbedingt notwendig, aber auf jeden Fall einen Besuch wert.
Innerer Körperinhalt
Im Body Tag habe ich einen Wrapper div mit der ID eingerichtet #w. Ich habe das Layout in zwei weitere Divs mit IDs aufgeteilt #pagebody und #navmenu. Die gesamte Seitenbreite ist wahlweise auf 640 Pixel beschränkt, sodass das Layout auf eine strikte Zahl skaliert wird.
Das Navigationsmenü erhält einen niedrigeren Z-Index-Wert, so dass #pagebody ist immer an der Spitze. Dies ist wichtig, da der JavaScript-Code um eine bestimmte Anzahl von Pixeln über den Seitenkörper gleitet, um die darunter liegende Navigation anzuzeigen.
Ich habe vor jeder HTML-Seite ein Hash-Symbol (#) verwendet, um schlechtes Verhalten in Mobile Safari zu verhindern. Wenn Sie auf einen Link klicken, wird die URL-Leiste angezeigt und der Inhalt wird heruntergedrückt. Beim Referenzieren einer ID wird nichts außer durch JavaScript-Aufrufe neu geladen.
CSS-Positionierung
Es gibt nicht viele verwirrende Inhalte in unserem CSS-Code. Die Positionierung wird größtenteils manuell durchgeführt und anschließend über jQuery bearbeitet. Es gibt aber einige interessante Stücke in unserem Dokument.
/ ** @group core body ** / #w #pagebody position: relativ; links: 0; Max-Breite: 640px; min-Breite: 320px; z-Index: 99999; #w #navmenu Hintergrund: # 475566; Höhe: 100%; Bildschirmsperre; Position: feststehend; Breite: 300px; links: 0px; oben: 0px; z-Index: 0;
Dieses obere Segment definiert Stile für beide Abschnitte der Seite. Unser Nav-Menü ist nur 300 Pixel breit, so dass noch etwas Platz für den Seiteninhalt vorhanden ist. Die Menüschaltfläche Öffnen / Schließen befindet sich ebenfalls direkt auf der linken Seite und ist immer zugänglich. Der wichtige Teil hier ist der Z-Index-Eigenschaftswert und die Verwendung Position: feststehend; in unserem navmenu.
Die Kopfzeile der oberen Symbolleiste ist ebenfalls ein interessanter Abschnitt. Dies ist auf eine feste Position eingestellt, so dass mit dem Seiteninhalt gescrollt wird. Dies repliziert einen ähnlichen Effekt, den Sie in jeder Titelleiste der iOS-App finden würden.
/ ** @group header ** / #w #pagebody header # toolbarnav display: block; Position: feststehend; links: 0px; oben: 0px; z-Index: 9999; Hintergrund: # 0b1851 URL ('img / tabbar-solid-bg.png') oben links keine Wiederholung; Grenzradius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; Rand unten rechts Radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; Rand unten links Radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; Höhe: 44px; Breite: 100%; Max-Breite: 640px; #w #pagebody header # toolbarnav h1 text-align: center; Polsterauflage: 10px; Polsterung rechts: 40px; Farbe: # e6e8f2; Schriftdicke: fett; Schriftgröße: 2.1em; Text-Schatten: 1px 1px 0px # 313131; Mobile Regeln
Es ist leicht zu bemerken, dass ich auch ein Hintergrundbild für die blaue Textur der Kopfzeile verwende. Diese hat eine Größe von 640 × 44 Pixel, um die konsistente Layoutstruktur zu erhalten. Ich habe aber auch ein image @ 2x für iPhone / iPad Retina Displays entwickelt. Sie können beide Bilder unten sehen oder aus meinem Demo-Quellcode entnehmen.
- System/demo/img/[email protected]
- System/demo/img/[email protected]
Ich habe das mobile CSS für diese Funktionalität in einer anderen Datei mit dem Namen eingerichtet responsive.css. Es enthält zwei Medienabfragen, die die Titelleiste bg und das Menütasten-Symbol für Retina-Geräte ersetzen.
/ ** retina display ** / @media only screen und (-webkit-min-device-pixel-ratio: 2), nur screen und (min-moz-device-pixel-ratio: 1,5), nur screen und ( min-device-pixel-ratio: 1,5) #w #pagebody header background: # 0b1851 url ('img/[email protected] ') oben links keine Wiederholung; Hintergrundgröße: 640px 44px; #w #pagebody header # menu-btn background: url ('img/[email protected] ') no-repeat; Hintergrundgröße: 53px 30px; Menüpfeile gestalten
Im Navigationsbereich habe ich auch ein kleines Pfeilsymbol auf der rechten Seite jedes Menülinks eingefügt. Dies kann leicht durch ein Bild aus einer Creative Commons-Grafik ersetzt werden. Aber vor allem CSS3-Fans werden diese Methode gerne ausprobieren.
#w #navmenu ul li a :: after content: "; display: block; width: 6px; height: 6px; border-right: 3px solid # d0d0d8; border-top: 3px solid # d0d0d8; position: absolut; rechts; : 30px; oben: 45%; -webkit-transform: drehen (45deg); -moz-transform: drehen (45deg); -o-transform: drehen (45deg); transform: drehen (45deg); #w #navmenu ul li a: hover :: after border-color: # cad0e6;
Wir benutzen die verwandeln Eigenschaft, um einen kleinen Rand nach dem Inhalt zu erstellen. Ich setze auch ein Position: absolut; So können wir diese Ränder frei um den inneren Link verschieben. Es ist sehr einfach, die Randfarbe in einem Schwebeflugzustand zu ändern, was ein dynamischeres Gefühl vermittelt. Es ist ziemlich unglaublich, was Sie mit einfachen HTML5- und CSS3-Regeln erreichen können.
Aber jetzt kommen wir zu den kleinen Teilen des JavaScript-Codes. Beachten Sie, dass dies ein Include in die jQuery-Bibliothek erfordert, damit mein Code ordnungsgemäß ausgeführt werden kann.
jQuery animiert
Beim Schreiben dieser benutzerdefinierten Codes habe ich ein brandneues Dokument mit dem Namen erstellt script.js. Fühlen Sie sich frei, diese direkt in zu schreiben >
$ (document) .ready (function () var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" #content "); var viewport = width: $ (window) .width (), height: $ (window) .height (); // Variablen abrufen als // viewport.width / viewport.height Zu Beginn habe ich einige Seitenvariablen eingerichtet, mit denen wir Elemente im Dokument viel schneller referenzieren können. Der Viewport-Wert wird nie verwendet, kann jedoch nützlich sein, wenn Sie die Animationsstufen anpassen möchten. Sie können beispielsweise die aktuelle Browserbreite überprüfen und das Menü entsprechend kleiner oder breiter öffnen.
function openme () $ (function () topbar.animate (left: "290px", duration: 300, Warteschlange: false); pagebody.animate (left: "290px", duration: 300) Warteschlange: falsch);); function closeme () var closeme = $ (function () topbar.animate (left: "0px", duration: 180, queue: false); pagebody.animate (left: "0px", duration: 180, queue: false););
Als Nächstes habe ich zwei wichtige Funktionen zum Öffnen und Schließen des Menüs definiert. Dies hätte in einer einzigen Funktion und mit Callback-Umschaltung geschehen können - es sei denn, wir müssen tatsächlich zwei verschiedene Elemente gleichzeitig animieren. Leider ist dies nicht das Standardverhalten von jQuery, daher müssen wir auf eine alternative Syntax zurückgreifen.
Die beiden Elemente, auf die wir abzielen, werden benannt Topbar und Seitenkörper. Der innere Inhaltsbereich mit weißem Hintergrund ist der gesamte Seitenkörper. Die Titelleistenposition befindet sich jedoch am oberen Rand der Seite. Das bedeutet, dass die Seite natürlich nicht animiert wird und wir einen separaten Anruf verwenden müssen. Die Öffnung ist so eingestellt, dass 290px nach links gedrückt wird (fast die gesamte Breite von 300px), und die Schließfunktion wird zurückgezogen.
Dynamischen Inhalt laden
Der obige Code ist einfach genug, um sich um die Animation zu kümmern. Und theoretisch ist das alles, was Sie für eine so einfache mobile Website brauchen - aber ich möchte noch ein bisschen mehr hinzufügen.
Jedes Mal, wenn der Benutzer auf einen Menü-Link klickt, möchten wir die aktuelle Navigation schließen und ein Ladegif anzeigen, während wir nach dem Seiteninhalt suchen. Danach entfernen wir das GIF-Bild und laden es in das Innere. Das ist fantastisch, da wir sogar statische .html-Seiten für den Inhalt verwenden können. Kein PHP oder Ruby oder Perl oder Backendsprachen, um Dinge unordentlich zu machen.
Klicks verwalten
Zunächst wollen wir testen, wann unsere Benutzer auf die Navigationsschaltflächen klicken. Dadurch wird der normale href-Wert nicht mehr geladen. Stattdessen können Sie unsere eigenen Funktionen verwenden, um externe Inhalte anzuzeigen.
// Laden des Seiteninhalts für die Navigation $ ("a.navlink"). live ("click", Funktion (e) e.preventDefault (); var linkurl = $ (this) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = '
Jetzt öffnen wir einen Selektor für jeden Anker mit der Klasse Navlink. Wenn ein Benutzer auf einen dieser Links klickt, wird das Laden einer Variablen für die vollständige URL verhindert und eingerichtet. Ich habe auch eine Variable für den Inhalts-HTML-Code eingerichtet, die einen Standard-Image-Loader enthält. Wenn Sie Ihre eigenen Einstellungen anpassen möchten, empfehle ich Ajaxload.
Ajax .load ()
Es gibt zwei verschiedene Stücke, die ich ordentlich zerlegt habe. Der folgende Code ist unser erstes Bit, das das Navigationsmenü schließt und das gesamte Dokumentfenster ganz nach oben schiebt. Wir möchten den inneren Körperinhalt durch eine kleine Loader-Animation ersetzen, und Benutzer können dies nicht sehen, wenn sie unten auf der Seite angezeigt werden.
Schließ mich(); $ (function () topbar.css ("top", "0px"); window.scrollTo (0, 1);); Jetzt wollen wir endlich den inneren Körperinhalt durch unser Image ersetzen und die externe Seite zum Laden abrufen. Normalerweise dauert dies nur ein paar hundert Millisekunden oder sogar schneller, daher habe ich eine Timeout-Funktion eingestellt.
content.html (Imgloader); setTimeout (function () content.load (linkhtmlurl, function () / * no callback * /), 1200);
Dadurch werden 1200 Millisekunden vor dem Laden neuer Inhalte angehalten. Für meine Demo sieht das viel besser aus und gibt Ihnen eine Vorstellung davon, wie sich die Anwendung bei langsameren Internetverbindungen verhalten würde.
Fazit
Ich ermutige alle Web-Entwickler, den Tutorial-Quellcode herunterzuladen und auf eigene Faust herumzuspielen. Dies ist ein grundlegendes Beispiel dafür, was mit HTML / CSS3 und einem Hauch von JavaScript-Effekten erreicht werden kann. Das Erstellen mobiler Bildschirme ist mit Medienabfragen und erweiterbaren Webbrowsern einfacher denn je.
Prüfen Sie, ob Sie diesen Code in Ihren zukünftigen Webprojekten anwenden können. Das Erstellen mobiler Anwendungen ist eine Kunst, ähnlich wie Webdesign, und erfordert viel Engagement und Übung. Ich hoffe, dass dieses Tutorial nur für einige begeisterte Entwickler ein guter Ausgangspunkt ist. Wenn Sie Fragen oder Gedanken zum Code haben, teilen Sie uns dies bitte im Post-Diskussionsbereich mit.
