Wie schon erwähnt bin ich selbst ein Anfänger auf diesem Gebiet. Diese mobilen Projekte waren für mich der erste Berührungspunkt mit dem jQuery mobile Framework. Und seit dem ich damit arbeite, haben mich einigen Dinge erstaunt und andere ziemlich frustriert.
Falls ihr selbst mit dem Gedanken spielt jQuery mobile in eurem Projekt einzusetzen, so kann ich euch diese Entscheidung leider nicht abnehmen. Aber ich werde versuchen, sie für euch etwas leichter zu machen, indem ich hier ein paar Vor- und Nachteile aufliste, auf die ich bei meiner Arbeit gestoßen bin:
1. Data-enhance
Eine der größten Eigenschaften von jQuery mobile ist die
data-enhance. Also die Erweiterung der vorhandenen Daten, in dem Fall die Erweiterung der HTML Tags. Denn das Framework kommt zusammen mit einem speziellen Stylesheet, in dem bereits unzählige Klassen vordefiniert sind.Und diese Klassen werden den entsprechenden Tags einfach angehängt und diese somit gestyled.
Ein Beispiel ist der HTML Tag
form und alle dazugehörigen input, select, textarea etc. Formular Tags. Diese werden durch data-enhance automatisch mit einem border-radius, einer background-color oder einem box-shadow versehen.Das nimmt einem natürlich gleich mal einen Haufen Arbeit ab und sieht dazu auch noch ganz schick aus. Doch in den meisten Fällen besitzt die eigentliche Website bereits ein eigenes Stylesheet, das an das entsprechende Corporate Design des Unternehmens angelehnt ist. Und in den wenigsten Fällen wird man die vordefinierten Styles ohne Änderungen übernehmen können.
Ich für meinen Teil bin kein Freund von vorgestylten Klassen bzw. Elementen, da ich es persönlich schwieriger finde, bestehenden Code anzupassen, als ihn gleich selbst zu schreiben. Da trifft es sich gut, dass jQuery mobile das mitgelieferte Stylesheet nicht zwingend benötigt. Die Klassen sind zwar trotzdem schon alle vorhanden, stylen lassen sie sich dann jedoch selbst.
Für kleinere Projekte wie etwa überschaubare Web-Apps bietet sich das Stylesheet jedoch an, da man hier wirklich ohne größeren Aufwand zu einem ersten Erfolg gelangt. Zudem kann man innerhalb des Frameworks zwischen verschiedenen vordefinierten Themes wählen und sogar individuelle Themes anlegen.
Webentwickler Profi-Tipp:
Falls man sich dazu entscheidet, das dazugehörige Stylesheet zu verwenden und trotzdem innerhalb des Frameworks bestimmte Elemente nicht gestyled haben möchte, so lässt sich dies mit demdata-enhanceAttribut vermeiden z.B.
<form data-enhance="false"></form>
Alle Kindelemente werden dann vom automatischen Styling ausgeschlossen.
2. Data-ajax
Eine weitere, elementare Eigenschaft des jQuery mobile Frameworks ist das Laden der Inhalte über AJAX. Dadurch soll der Eindruck einer "echten" nativen App entstehen, ohne lange Ladezeiten und mit animierten Seitenwechseln.
Das Problem hierbei ist, dass wirklich alle Links mittels AJAX geladen werden - auch die auf externe Seiten bzw. Domains. Dies lässt sich allerdings mit dem
data-ajax und dem rel Attribut verhindern. Ein Link, der eines dieser Attribute enthält, wird dann ganz normal als Link behandelt:<a data-ajax="false" rel="external"></a>
Hierbei gilt, dass das
data-ajax Attribut bei Links verwendet wird, die sich innerhalb der Domain nicht mittels AJAX öffnen sollen. Das rel Attribut hingegen, weist auf Links hin, die wirklich auf eine externe Seite verlinken.Natürlich kann man das AJAX-Ladeverhalten auch komplett für das jeweilige Projekt abschalten, wobei man sich dann allerdings fragen sollte, ob jQuery mobile wirklich das richtige Framework für Einen ist. Denn wie gesagt, man unterdrückt damit eine elementare Funktion.
Sollte es dennoch nachvollziehbare Gründe für diesen Schritt geben, so lässt er mit folgendem
script im head umsetzen:<script type="type/javascript">
$(document).bind('mobileinit', function(){
$.mobile.ajaxEnabled = false;
});
</script>
3. Mobileinit
Und da ich es gerade schon angesprochen habe, folgt hier ein kleiner Überblick über die eigentliche Initialisierung des jQuery mobile Frameworks mittels dem
mobileinit Event.Dieses Event wird noch gestartet, bevor jQuery mobile mit der Umsetzung des Codes beginnt und erlaubt uns, die globalen Konfiguationen des Frameworks zu überschreiben.
Am besten wird es direkt zwischen dem normalen jQuery Script und dem jQuery mobile Script in den
head eingebaut:<script src="http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js" type="text/javascript"></script>
<script type="type/javascript">
$(document).bind('mobileinit');
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/x.x.x/jquery.mobile.min.js" type="text/javascript"></script>
Innerhalb dieses Events können nun sämtliche Einstellungen für das persönliche Projekt vorgenommen werden.
Im folgenden Beispiel schalten wir zunächst wieder das Laden über AJAX komplett ab. Zusätzlich setzen wir den Effekt für Seitenwechsel auf
none:<script src="http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js" type="text/javascript"></script>
<script type="type/javascript">
$(document).bind('mobileinit', function(){
$.mobile.ajaxEnabled = false;
$.mobile.defaultPageTransition = 'none';
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/x.x.x/jquery.mobile.min.js" type="text/javascript"></script>
Auf diese Art und Weise lässt sich jQuery mobile nun komplett auf die eigenen Bedürfnisse anpassen.
Ich hoffe dieser erste Teil meines jQuery mobile Resümees gibt euch schon einmal einen groben Überblick über die Eigenschaften des mobilen Frameworks und erleichtert euch die Entscheidung, ob ihr es für eure Projekt nutzen möchtet.
Im nächsten Teil werde ich dann noch näher auf die verschiedenen Eigenheiten und Problemchen, auf die man bei der Verwendung achten muss, eingehen.
Fortsetzung folgt...