Vor nicht allzu langer Zeit hat das jQuery-Team jQuery Mobile 1.2 veröffentlicht. Diese neue Version enthält einige fantastische Änderungen! In diesem Artikel werden wir einige der neuen für Entwickler verfügbaren Widgets durchgehen, einen Überblick über die Änderungen an vorhandenen Widgets erhalten und einen Blick auf einige wichtige Verbesserungen werfen, die sich auf Ihre jQuery Mobile-Anwendung auswirken könnten. Lass uns anfangen, sollen wir?

Zuerst müssen wir die Bits und Bytes herunterladen. Besuchen Sie die jQuery Mobile-Downloadseite und laden Sie die Option herunter, die Ihren Anforderungen am besten entspricht. Alternativ können Sie einfach den unten angegebenen Boilerplate-Code verwenden.

Darüber hinaus ist es jetzt vielleicht ein guter Zeitpunkt, um den Download Builder, den das jQuery Mobile-Team erstellt, schnell zu diskutieren. Es ist immer noch in Alpha, aber Sie können Ihren Download so anpassen, dass er nur die Teile von jQuery Mobile enthält, die Sie benötigen, und nichts weiter. Sie können bestimmte Ereignisse, Übergänge, Formularelemente oder Widgets ausschließen, die Sie nicht interessieren. Es ist für Entwickler gedacht, die extrem darauf bedacht sind, die höchste Leistungsfähigkeit ihrer Anwendung zu erreichen.

---

Widgets

Das Herzstück einer jeden jQuery Mobile-Anwendung sind ihre Widgets. Sie sind wohl der sichtbarste Teil der Seite und der Teil, mit dem Benutzer auf so einfache Weise mit der Seite interagieren können. Das jQuery Mobile-Team hat unzählige Stunden damit verbracht, ihre Widgets zu testen, aufzubauen und zu verfeinern, um sicherzustellen, dass sie das Beste sind, was sie können. In Version 1.2 hat das Team es mit einem Widget, das die Entwickler seit der Veröffentlichung des Frameworks gefragt haben, wirklich aus dem Park geworfen: Popup-Modale.

Popups

Ein Popup-Modal ist ein kleiner Bereich der Seite, der andere Teile der Seite überlagert. Sie werden meistens als Tooltips oder zur Anzeige von Fotos, Karten und zusätzlichen Inhalten verwendet. Diese Informationen sind in der Regel nicht wichtig genug, um eine weitere Seite zu rechtfertigen, sind aber dennoch wichtig, um sie selbst anzeigen zu können. Die Art und Weise, wie jQuery Mobile 1.2 Popups implementiert hat, ist perfekt. Erfahren Sie, wie einfach es ist, Popups zu einem Projekt hinzuzufügen.

Eine kurze Anmerkung, der Kürze halber: Für alle folgenden Codebeispiele wird der folgende Boilerplate-HTML-Code verwendet. Die jQuery Mobile CSS- und JS-Dateien (einschließlich jQuery) sind mit dem jQuery-CDN zu Ihrer Bequemlichkeit verlinkt.

Das Hinzufügen eines Popup-Fensters zu einer Seite in Ihrer Anwendung umfasst zwei Schritte. Zuerst benötigen Sie einige Mittel, um das Popup auszulösen. Dies ist im Allgemeinen ein Link oder eine Schaltfläche oder etwas, mit dem der Benutzer interagiert. Um das Element auszulösen, fügen wir das folgende Attribut hinzu:

data-rel = "popup"

Zweitens müssen Sie den Inhalt anzeigen. Dies könnte von einem einzigen reichen div zu einem Speisekarte, ein bilden, oder sogar fotos. Das Inhaltselement erhält ein eigenes Attribut:

data-role = "popup"

Schließlich für einfache Link-Schaltflächen die href Attribut muss dem entsprechen Ich würde des anzuzeigenden Inhalts. Lassen Sie uns die vollständige Implementierung überprüfen.

Popup öffnen 
 
Dies ist ein komplett einfaches Popup, keine Optionen gesetzt.
 

Was Sie auf der Seite sehen, sollte ungefähr so ​​aussehen:

Tooltips

Nun, da Sie wissen, wie Sie ein Popup erstellen, wollen wir uns andere Möglichkeiten ansehen. Eine häufige Verwendung ist ein Tooltip. Hilfetext oder erweiterter Text, der angezeigt wird, wenn ein Benutzer auf eine Schaltfläche klickt. Richten Sie den Code wie zuvor ein:

Finde mehr heraus 
 
Sie haben mehr herausgefunden!.
 

Diesmal gestalten wir den resultierenden Inhalt mit dem e swatch von jQuery Mobile für ein angenehmeres Aussehen. Dies erinnert uns daran, dass Popups erstklassige jQuery Mobile-Bürger sind und wie alle anderen Elemente auf der Seite behandelt werden können.

Menüs

Lassen Sie uns noch etwas komplizierter vorgehen: ein Menü. Das ist ein beliebter Ansatz zur Seitennavigation. Geben Sie dem Benutzer ein Menü direkt an seinen Fingerspitzen. Wie sieht das mit Popups aus??

Speisekarte 
 
 
Mein Menü
 
Nicht verbunden
 
Verknüpft
 
Mit zählen42
 
 

Und die resultierende Ausgabe sollte dieser ähneln:

Sie können auch die reduzierbaren Listen von 1.2 in Popups verwenden. Hier ein kurzes Beispiel:

Verschachteltes Menü 
 
 
 
Farben
 
 
rot
 
Blau
 
 
 
 
Formen
 
 
Kreis
 
Quadrat
 
 
 
 

Und die Ergebnisse:

Das ist es wert, darauf hingewiesen zu werden data-inset = "true" ist auf der erforderlich Listenansicht oder die Ecken Ihrer Liste werden angezeigt. Versuchen Sie und Sie werden sehen.

Formen

Ein weiterer beliebter UX-Ansatz ist das Anzeigen eines Anmeldeformulars, das über einer Seite angezeigt wird. Dies ist jetzt mit jQuery Mobile-Popups möglich. Hier ist ein einfaches Formular für Benutzername und Passwort.

Anmeldung 
 
 
Bitte einloggen
 Nutzername:  Passwort:  Einloggen 
 

Was gibt Ihnen:

Standardmäßig zentrieren sich Popups auf das Objekt, das sie ausgelöst hat. Es gibt ein optionales Attribut, das Sie in den nächsten drei Beispielen sehen werden. Es ist data-position-to = "Fenster" und Sie wenden es auf das Element an, das das Popup auslöst. Fügen Sie das dem hinzu Anmeldung Schaltfläche oben, um zu sehen, was passiert.

Dialoge

Eine häufige Notwendigkeit für Webanwendungen ist die Fähigkeit, mit dem Benutzer zu interagieren. Wir haben gerade einen Ansatz geprüft: ein Anmeldeformular. Manchmal müssen Sie dem Benutzer jedoch Fragen stellen. Ein Dialog ist dafür die perfekte Lösung. und was wissen Sie, Popups haben Sie abgedeckt! Wie sieht der Code aus? Hier ist ein einfaches Beispiel:

Dialog 
 
 
Seite löschen?
 
 
 
Möchten Sie diese Seite wirklich löschen??
 
Diese Aktion kann nicht rückgängig gemacht werden.
 Nein Ja, lösche es 
 

Beachten Sie im Popup-Inhaltscontainer ein weiteres neues Attribut für Ihre Verwendung: data-overlay-theme = "a". Dieses Attribut wendet den schattierten Hintergrund auf das Dialogfeld an. Das Thema ist davon betroffen. Seien Sie also vorsichtig, wenn Sie mit Themen arbeiten, die mit ThemeRoller erstellt wurden.

Fotos

Ich kann nicht zählen, wie oft Entwickler von jQuery Mobile nach einer besseren Methode für den Umgang mit Bildergalerien gefragt haben. Popups sind zwar nicht die perfekte Lösung für eine große Anzahl von Bildern, aber sie eignen sich hervorragend für eine Handvoll Bilder, die größer angezeigt werden müssen. Noch besser, es ist unglaublich einfach. Hör zu:

Foto 
 Schließen 

Der obige Code gibt Ihnen ein elegantes Foto in der Mitte des Fensters, einschließlich einer Schaltfläche zum Schließen des Fensters.

Wie haben sie das gemacht? Im Kontext eines Popups wird das Anker Das Tag weist Attribute auf, die sich geringfügig von der Verwendung an anderen Stellen auf der Seite unterscheiden. Insbesondere die ui-btn-richtig Klasse positioniert das Bild in der Ecke des Bildes und nicht auf der Seite, während die Daten-Symbol und Daten-Iconpos Mit Attributen können Sie die Schaltfläche wie eine normale Schaltfläche formatieren.

Sie können mit Popups ziemlich ausgefallen sein, einschließlich Inline-Video und sogar interaktiver Karten. Überprüfen Sie die jQuery Mobile-Dokumentation auf Popups und Iframes.

Zusammenklappbare Listenansichten

Eine weitere großartige neue Funktion ist die Möglichkeit, reduzierbare Sets mit Listenansichten zu kombinieren. Rufen Sie sie "Zusammenklappbare Listenansichten" auf, und Sie haben in jQuery Mobile 1.2 ein brandneues Widget. Wie arbeiten Sie? Ich bin froh, dass du gefragt hast. Erstellen Sie einfach eine Liste, die Sie mögen, und verpacken Sie sie in einem zusammenlegbaren Satz. Zusammenklappbare Listenansichten unterstützen auch mehrere Listen - seien Sie also verrückt!

 
Lieblingsgewürzmädchen?
 
 
Vornehm
 
Unheimlich
 
Sportlich
 
Baby
 
Ingwer
 
 

Der obige Code würde zu dieser Ansicht der reduzierbaren Liste führen:

---

Verbesserungen

Neben neuen Widget-Typen bietet jQuery Mobile 1.2 eine Reihe nützlicher Verbesserungen der vorhandenen Funktionen. Werfen wir einen Blick auf einige der wertvolleren.

jQuery Support-Änderungen

Eine der größten Verbesserungen in Version 1.2 ist die zusätzliche Unterstützung für jQuery 1.8. Dies führt zu erheblichen Leistungssteigerungen in Form einer vollständig überarbeiteten Version von Sizzle.js (der Selector Engine für jQuery) sowie zu zahlreichen anderen Verbesserungen.

Der Nachteil ist, dass das jQuery Mobile-Team entschieden hat, dass es Zeit für den Support von jQuery 1.6 war. Dies kann für einige Leute unglücklich sein, die noch ältere Versionen von jQuery verwenden, aber es ist ein fairer Handel.

Listenansicht Autoteiler

Wenn Sie in jQuery Mobile jemals eine Liste ständig wechselnder Personen, Orte oder Dinge verwalten mussten, mussten Sie wahrscheinlich einen kniffligen Code schreiben, um dynamische Listview-Header anzuzeigen. Schade, dass Sie die ganze Zeit damit verbracht haben, denn das jQuery Mobile-Team machte es so einfach wie ein einzelnes Attribut.

data-autodividers = "true"

Das dreht diese Liste um:

In:

Beachten Sie, dass hierdurch nicht sortiert, gruppiert oder gefiltert wird. Für diese Art von Funktionalität sollten Sie mein jQuery Mobile Tinysort-Plugin ausprobieren.

Schreibgeschützte Listen

jQuery Mobile bietet Listenansichten mit Lesezugriff. Es ist jedoch schwer zu sagen, dass sie nicht anklickbar waren. Version 1.2 entfernt den Listenverlauf, wodurch die Zeile eine flache Farbe hat. Dies sollte Ihren Benutzern einen besseren visuellen Eindruck vermitteln.

Bessere Breiteneinstellungen für Formularelemente

Version 1.2 behebt ein teilweise lästiges Problem mit Formularelementen, wobei sie in manchen Fällen nicht die volle Breite ihres übergeordneten Elements einnehmen.

Zusätzliche Geräte hinzugefügt

Sie haben vielleicht bemerkt, dass fast täglich neue Geräte hinzugefügt werden. Das jQuery Mobile-Team unternimmt sein Bestes, um gegen so viele dieser Geräte wie möglich zu testen. Zur Liste der A-Grade-Plattformen wurden die folgenden Geräte / Betriebssysteme / Browser hinzugefügt: iOS 6, Android 4.1 (Jellybean), Tizen, Firefox für Android und Kindle Fire HD.

---

Vollständige Liste der Änderungen

Eine vollständige Liste der Änderungen für Version 1.2 finden Sie im Blog von jQuery Mobile.

Ich hoffe, dass einige dieser Verbesserungen dazu beitragen werden, Ihre Anwendungen zu verbessern. Denken Sie daran, dass das jQuery Mobile-Team auf Ihrer Seite ist! Wenn Sie etwas sehen, das Ihrer Meinung nach wertvoll ist, fragen Sie danach: Erstellen Sie ein Problem in ihrem Github-Repository und schlagen Sie es vor. Besser noch, fackeln Sie ihr Repo und fügen Sie selbst Code hinzu!