Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Einführung in jQuery Mobile

Seite 4 / 4

Seitenereignisse

Jede jQM-Seite bringt eine Reihe von Ereignissen, die mit dem Erstellen, dem Laden oder der Anzeige der Seite verbunden sind:

  • pagebeforeload, pageload and pageloadfailed werden beim Laden einer externen Seite ausgelöst.
  • pagebeforechange, pagechange and pagechangefailed sind Seitenveränderungsereignisse. Diese Ereignisse werden ausgelöst, wenn der Benutzer die Seite innerhalb der Anwendung wechselt.
  • pagebeforeshow, pagebeforehide, pageshow and pagehide sind Seitenübergangsereignisse. Diese Ereignisse werden vor, während und nach einem Seitenübergang ausgelöst und werden benannt.
  • pagebeforecreate, pagecreate and pageinit sind für die Seiteninitialisierung zuständig.
  • pageremove kann ausgelöst und anschließend gehandhabt werden, wenn eine Seite vom DOM entfernt wird. Der folgende Code zeigt uns einige dieser Beispiele. Dabei gibt es einige Dinge zu beachten:
  • Der Code erzwingt den Einsatz von AJAX. Ohne AJAX werden manche Ereignisse vielleicht nicht ausgelöst.
  • Die Funktion, die die Ereignise behandelt, wenn sie ausgelöst werden, hat zwei Parameter. Diese Parameter können ziemlich komplexe Daten zurückliefern.
  • Anwendungsentwickler werden sich am meisten für die Seitenübergangsereignisse interessieren.
  • Für Entwickler von ASP.NET-WebForms sind diese Ereignisse vom Konzept her den serverseitigen Ereignissen sehr ähnlich.
  • Die Ereignisse pagebeforecreate und pageshow werden ausgelöst, wenn die Seite mit der ID "two" geladen ist. Das Ereignis pageload wird ausgelöst, sobald eine beliebige Seite von der momentanen Seite aus geladen wird.
$(document).bind("mobileinit", function () {
  $.extend($.mobile, {
    ajaxEnabled: true
  });
  $("#two").live("pagebeforecreate", function (event, data) {
    alert("pagebeforecreate called");
  })
  $(document).bind("pageload", function (event, data) {
    alert("pageload called");
  })
  $("#two").live("pageshow", function (event, data) {
    alert("pageshow was called");
  });
});

Gestenereignisse

Gesten sind eine übliche Aktion in berührungssensitiven Umgebungen. Den Finger über das Display zu ziehen, ist eine natürliche Handbewegung, um Seiten zu wechseln, Einträge durchzusehen und so weiter. Am folgenden Beispiel sehen wir, wie ein Javascript Alert durch eine Geste ausgelöst wird:

$(document).bind("mobileinit", function () {
  $(document).live("swiperight", function () {
    alert("swipe right");
  });
});

Ausrichtungsereignisse

Eines der spannenden Features von mobilen Endgeräten ist, dass ihre Displays nicht in einer unveränderlichen Position verharren müssen. Einmal abgesehen von all den Witzen, wie man das iPhone richtig hält, wird der Benutzer die Ausrichtung des Geräts ab und zu ändern, während er eine Anwendung verwendet. Das kann durch eine einfache Bewegung des Geräts passieren, oder weil man es einem Freund in die Hand drückt. Die App ESPN College Football Scoreboard hat zum Beispiel im Herbst 2011 die Ausrichtung des Geräts verfolgt. Wenn die Ausrichtung des Geräts auf Hochformat geändert wurde, hätte die Punktetafel (engl. scoreboard) nicht auf das Display gepasst und der Benutzer hat eine Meldung zu sehen bekommen, dass er die Ausrichtung wieder ändern soll. Obwohl das ein wenig umständlich gewesen sein mag, wurde dies mit der Verfolgung der Geräteausrichtung erreicht. Das Verfolgen und Binden des Ausrichtungsereignisses ist mit jQM ziemlich einfach, wie Sie hier sehen können:

$(window).bind("orientationchange", function (orientation) {
  alert(orientation);
})

Beachtet, dass viele dieser Ereignisse nicht richtig funktionieren, wenn AJAX ausgeschaltet ist.

Zusammenfassung

Mobile Geräte und Anwendungen sind definitiv beliebt und sie werden Tag für Tag wichtiger. Ich habe mobile Anwendungen schon geschrieben, bevor es jQuery Mobile gab. Glauben Sie mir, wenn ich sage, dass jQM mein Leben viel leichter gemacht hat.

Ich hoffe sehr, dass euch dieser Artikel die notwendigen Informationen gibt und euch beim Start mit mobiler Webentwicklung mit jQuery hilft.

Internet Explorer und HTML5

Zugegebenermaßen, HTML5 ist quasi immer noch wie ein bewegliches Ziel. Im Mai 2011 erhielt HTML5 beim W3C den Status „Last Call“, um zu bestätigen, dass der Standard technisch gesehen solide ist. Im Mai 2012 wurde die HTML5 Spezifikation dann wieder in den Zustand „Working Draft” (Arbeitsentwurf) zurückgesetzt. Dies zeigt, dass noch dran gearbeitet werden muss. WHATWG hat ihren „HTML5 Living Standard” einfach in „HTML” umbenannt. Für Entwickler ist es sehr verwirrend, was nun HTML5 ist und was nicht.

Während sich viele Teile des HTML5-Standards immer noch im Wandel befinden, gibt es auch viele Teile, die gut funktionieren und bereits in verschiedenen Browsern eingebaut sind. Einige dieser Features, die im erst seit kurzem verfügbaren Internet Explorer 10 eingebaut sind, habe ich hier aufgelistet.

  • H.264 und der Video-Tag: Mit eingebauter Unterstützung für den Videostandard H.264 benötigt der IE ein Browser-Plugin weniger, um Videos darstellen zu können. H.264 ist der Format-Standard, den führende Websites verwenden und Internet Explorer unterstützt den Standard. Zusammen mit der Unterstützung des Codecs wird auch der video-Tag unterstützt.
  • Eingebetteter Audio-Tag: HTML5 bringt Unterstützung für einen eingebetteten Audio Tag mit. Internet Explorer unterstützt die Codecs mp3 und aac.
  • Skalierbare Vektorgrafiken: SVG kann skalierbare Grafiken erzeugen, weil sie mit Vektoren gezeichnet werden und nicht mit Bildern.
  • CSS3: CSS dient zum Formatieren von Webseiten. Der IE9 unterstützt auf Standards basierendes CSS3, wie Selektoren, Namensräume, Farben, Werte, Hintergründe, Rahmen und Schriftarten.
  • AppCache: Mittels AppCache können Webseiten Ressourcen lokal speichern. Dies hilft Entwicklern, ihre Anwendungen zu beschleunigen, weil Ressourcen lokal angesprochen werden können und nicht von einem Server geladen werden müssen.
  • Drag and Drop: Mittels des Attributs draggable kann jedes HTML-Element auf der Seite umhergezogen werden. Zusätzlich wurde das Attribut files zum Objekt dataTransfer-Objekt, um Drag and Drop für eine oder mehrere Dateien vom lokalen Dateisystem auf die Webseite zu ermöglichen.
  • Formulare: Unterstützung der neuen HTML5-input-Typen, der neuen Attribute für das input-Element und dem progress-Element wurde hinzugefügt.
  • History: Unterstützung für die History-Schnittstelle wurde hinzugefügt. Dies wird den Verlaufsstapel einer Website und Kontrolle über die URL verbessern.

Eine Liste weiterer Features, die im Internet Explorer zur Unterstützung von HTML eingebaut wurden, finden Sie auf MSDN im Internet Explorer Developer Center.

Über den Autor

Wallace McClure ist ein Hinterwäldler aus Tennessee, der irgendwie den Weg nach Atlanta und zur Georgia Tech Universität fand. Dort hat es dann für zwei Abschlüsse gereicht: Bachelor of Science und Master of Science in Elektrotechnik. Er steht seit jeher auf Neues, was ihn zum Programmieren brachte (ursprünglich mit COBOL und x86 asm). Und dazu, dass er sich in Microsofts Web-Techniken vertiefte, sich sofort auf .NET Framework 1.0 beta stürzte, sich schon 1999 in mobile Techniken verliebte und einen Haufen anderer Dinge getan hat, die er wahrscheinlich nicht hätte tun sollen, aber trotzdem tat. Irgendwann damals wurde er dann von jemandem angesprochen, der einen Herausgeber vertrat, welcher schließlich von John Wiley and Sons aufgekauft wurde und geriet so in deren Wrox-Abteilung. Nachdem er einige Bücher geschrieben hatte, hat er das ganze Spektrum von Software-Architektur, über skalierbare Anwendungen, ADO.NET, SQL Server, Oracle, Web, AJAX, bis hin zu mobilen Technologien durchlaufen. Er hat für viele verschiedene Organisationen gearbeitet, von kleinen Start-ups bis hin zu staatlichen Stellen in der U.S.-Regierung.

Wenn er ausnahmsweise mal nicht Software schreibt, an Software denkt, über Software redet oder denkt er sei ein Comedian, dann kann Wally beim Golf spielen, im Fitnessstudio oder als Basketballtrainer angetroffen werden. Wallace McClure ist auf Twitter, Facebook und LinkedIn zu finden.

Weiterführende Ressourcen

Weiterführende Links

Startseite
  • Seite:
  • 1
  • 2
  • 3
  • 4

Bitte beachte unsere Community-Richtlinien

2 Reaktionen
fimbim

Die Einrückung in dem id="listViewMore" vom "list-divider I" und dem "iPhone" da drunter sind vertauscht.

Antworten
hagh

eine gute Einführung für alle die sich lieber berieseln lassen:
https://www.youtube.com/watch?v=xulY8rKVMaA

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.