Vorschau: Neue Features in jQuery Mobile 1.3

Panel PreviewIn einem meiner letzten Blogposts habe ich beschrieben wie man sich ein Panel in jQuery Mobile erstellt. Dies ist nun nicht mehr notwendig. Auf der jQuery Mobile Webseite findet sich nämlich eine neue Version, die 1.3.0 RC1. Diese ist zwar noch als unstable markiert trotzdem lohnt sich schon jetzt ein Blick darauf. Ein weiteres interessantes Features ist neben dem angesprochenem Panel und das Feature „Responsive Tables“.
Weiterlesen




HTML5: Attribut ‚data-‚ einsetzen

Durch CMS und den Einsatz von CSS ist der Grundstein für die Trennung von Content und Layout und die Trennung von Dokumentstruktur und Style gelegt. Die Weiterentwicklung der Technologien brachte allerlei interessante Anwendungen verschiedenster HTML-Attribute mit sich, die für bestimmte Funktionalitäten zweckentfremdet wurden. Unter diesem Umstand hatte wohl das ‚rel‘-Attribut am meisten zu leiden. Gerade die jQuery-Tools nutzen es gerne, um Overlays zu starten. Mit HTML5 ist der Zweckentfremdung ein Ende gesetzt.

Mit dem ‚data‘-Attribut steht dem Webentwickler ein Element-Identifier zur Verfügung, das für viele Anwendungsszenarien interessant ist. Über einige werde ich hier mal laut nachdenken. Aber erstmal zur Spezifikation:

Das ‚data‘-Attribut setzt sich aus dem Prefix ‚data-‚ und einen frei zu vergebenen Identifier zusammen (bei der Vergabe sollte man sich an die XML-Regeln halten) .

Beispiel:
<div class="containerMessage" data-role="alertMessage">Oops, there is an error!</div>

Es wird schon beim Lesen des Quelltextes klar, wofür dieses Element verwendet werden soll, was die Wartbarkeit des Codes vereinfacht. Auch die Identifizierung über ein Javascript-Framework wie jQuery ist wesentlich eindeutiger.
(Das mobile jQuery-Framework jQuery-mobile verwendet es z.B. für die Seitenstruktur). Es lassen sich beliebig viele ‚data‘-Attribute in einem Element verwenden.

Beispiel:
<div class="containerMessage" data-role="alertMessage" data-priority="high" data-msg="bad error" data-sendTo="foo@bar.de">Oops, there is an error!</div>

Bei diesem Einsatzszenario ist eine weitere logische Trennung gelungen:  Style- und Verhaltensstruktur. Sicher, das ließe sich natürlich auch mit einer zusätzlichen CSS-Klasse bewerkstelligen, aber die Lesbarkeit wäre nicht mehr so eindeutig. Liest man im JS-Code $(‚#containerMessage .alertMessage‘).irgendwas(); ist der Zusammenhang zwischen Element und Funktion schwammiger. Während $(‚div[data-role=“alertMessage“]‘).foobar(); auch in komplexen Funktionen durchaus logisch lesbar ist.

Ein weiterer Einsatz ist temporäre Daten in diesem Attribut abzulegen, die dann am Ende der Funktion gebündelt abgeschickt abgeschickt, oder zur Weiterverarbeitung rangezogen werden können, ohne in unsichtbaren Elementen, als Cookie oder key/value-Paar im localStorage kurzfristig versteckt zu werden. Sogar Strings lassen sich dort fehlerfrei unterbringen.

Wem fallen spontan noch andere Verwendungsmöglichkeiten ein?
Immer ran an die Kommentare.

 


jquery mobile 1.0 erschienen

Endlich nach etwas mehr als einem Jahr Entwicklungszeit wurde jquery mobile in der Version 1.0 vorgestellt. JQuery mobile soll weitgehend Geräte- und Plattform unabhängig sein und sich automatisch der Displaygrösse anpassen. Ausserdem soll sich die Performance des Frameworks um bis zu 50% gegenüber der Vorgängerversion verbessert haben. Unterstützte Plattformen sind etwa iOS, Android, BlackBerry, Symbian, Bada, MeeGo, Firefox Mobile, Opera Mobile, webOS und Windows Phone.

Wer sich über weitere Neuerungen der Version 1.0 informieren will findet hier alles weitere:

http://jquerymobile.com/blog/2011/11/16/announcing-jquery-mobile-1-0/