Mobile Web-Apps: jQuery Mobile 1.1.0 ist fertig

Das jQuery Mobile hat sein HTML5-Framework für mobile Apps in der Version 1.1.0 veröffentlicht. Zahlreiche Verbesserungen und neue Funktionen sind in die neue Version eingeflossen, die zudem schneller und runder laufen soll.

Artikel veröffentlicht am ,
Echte feste Toolbars in jQuery Mobile 1.1
Echte feste Toolbars in jQuery Mobile 1.1 (Bild: jQuery Mobile)

Die wichtigste Neuerung in jQuery 1.1.0 sind echte Toolbars an fester Position, komplett überarbeitete Animationen beim Seitenwechsel, ein neuer Ajax-Loader und verbesserte Designs für Formularelemente.

Stellenmarkt
  1. Senior JAVA Software Developer (m/f/d)
    IFCO Management GmbH, München, Gmunden (Österreich)
  2. SAP IS-H Anwendungsbetreuer (m/w/d)
    Thoraxklinik-Heidelberg gGmbH, Heidelberg
Detailsuche

Zwar unterstützte jQuery Mobile sogenannte "fixed Toolbars", also Menüzeilen, die an fester Position im Display sitzen, nutzte dazu aber einen Hack, der zu unschönen Effekten führte. Grund dafür war die lange Zeit unzureichende Unterstützung der CSS-Eigenschaft "position:fixed" in mobilen Browsern. Das aber hat sich mittlerweile geändert, so dass jQuery Mobile nun eine CSS-Lösung für Werkzeugleisten an fester Position verwendet, die auf vielen populären mobilen Plattformen funktioniert. Auf Geräten, die dies nicht unterstützen, scrollt die Werkzeugleiste mit ("position:static").

Verglichen mit andern Ansätzen, die Javascript nutzen, um feste Leisten zu erzeugen, ist die von jQuery Mobile 1.1 verwendete CSS-Lösung deutlich schneller, so dass es keine negativen Auswirkungen auf das Scrollen gibt. Entwickler können dabei festlegen, ob Toolbars bereits beim Laden einer Seite sichtbar sind oder erst nach einem Tippen sichtbar werden.

Da die neue Lösung aber beispielsweise unter iOS 4 nicht funktioniert, kann die alte Lösung in Form einer Erweiterung auch weiterhin verwendet werden.

Schnellere Animationen

Golem Akademie
  1. Kotlin für Java-Entwickler: virtueller Zwei-Tage-Workshop
    14.–15. Oktober 2021, Virtuell
  2. Terraform mit AWS: virtueller Zwei-Tage-Workshop
    14.–15. Dezember 2021, Virtuell
Weitere IT-Trainings

Die Animationen beim Wechseln von einer Seite zur nächsten laufen mit jQuery Mobile 1.1 schneller ab. Dazu haben die Entwickler einige Tricks integriert. Nach wie vor sind die Animationen unter Android 2.x aber zu langsam. Daher haben sich die Entwickler entschieden, bei diesen Geräten auf Animationen zu verzichten und nur noch Überblendungen zu nutzen.

Zugleich wurden mit "turn" und "flow" zwei neue Animationen integriert. Turn ähnelt dem in Windows Phone 7 genutzten Umklappen von Kacheln, Flow verkleinert eine Seite oder einen Dialog und verschiebt dann den Ausschnitt auf eine neue Seite, in die dann hineingezoomt wird.

Animationen werden darüber hinaus mit den entsprechenden Präfixen nun auch unter Firefox unterstützt.

Das Standard-Theme von jQuery Mobile wurde in der Version 1.1 aufgeräumt und verschlankt. Ein überarbeiteter Ajax-Loader hilft bei der Beschleunigung von Animationen.

Formulare überarbeitet

Diverse Formularelemente wurden überarbeitet, damit sie auch in den neuen Toolbars gut aussehen. So gibt es eine Miniversion aller Formularelemente, die weniger Höhe benötigt. Auch die Schalter, die Checkboxen oft ersetzen, wurden optisch verändert und Schieberegler können um eine Ziffernanzeige ergänzt werden. Dabei kann auch die Schrittweite, in der Schieberegler verstellt werden können, nun festgelegt werden.

Das Vergrößern von Seiten unter iOS funktioniert in der neuen Version. Dabei kommt ein von Scott Jehl entwickelter Trick zum Einsatz, der eine Seite gegen das Vergrößern sperrt, wenn das Gerät gedreht wird. In diesem Fall tritt andernfalls ein Bug in iOS zutage, weshalb das Zoomen oft ganz abgeschaltet wird.

JQuery Mobile 1.1 setzt jQuery 1.7.1 oder 1.6.4 voraus, soll künftig aber auch mit jQuery 1.7.2 laufen. Die Software steht unter jquerymobile.com/download zum Download bereit. Demnächst soll zudem ein Werkzeug zur Erzeugung angepasster Builds von jQuery Mobile zur Verfügung stehen. Der sogenannte Custom Download Builder soll ZIP-Archive erzeugen, die nur die benötigten Codeteile einer Datei zusammenfassen.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed


Aktuell auf der Startseite von Golem.de
Energiewende
Akkupreise steigen wegen zu hohen Rohstoffkosten

Die Party ist vorbei. Statt billiger, sollen Akkus durch neue Rekorde beim Lithiumpreis und anderen Rohstoffen im Jahr 2022 sogar teurer werden.
Eine Analyse von Frank Wunderlich-Pfeiffer

Energiewende: Akkupreise steigen wegen zu hohen Rohstoffkosten
Artikel
  1. Zip: Ratenzahlung in Microsoft Edge empört die Community
    Zip
    Ratenzahlung in Microsoft Edge empört die Community

    Die App Zip wird seit Microsoft Edge 96 standardmäßig aktiviert. Diese bietet Ratenzahlung an, schürt aber nur Hass in der Community.

  2. Gaming-Monitore bei Amazon bis zu 330 Euro reduziert
     
    Gaming-Monitore bei Amazon bis zu 330 Euro reduziert

    Der November und der Black Friday sind vorbei. Doch schon die nächsten Angebote stehen vor der Tür: die Last-Minute-Angebote bei Amazon.
    Ausgewählte Angebote des E-Commerce-Teams

  3. Razer Zephyr im Test: Gesichtsmaske mit Stil bringt nicht viel
    Razer Zephyr im Test
    Gesichtsmaske mit Stil bringt nicht viel

    Einmal Cyberpunk mit Beleuchtung bitte: Tragen wir Razers Zephyr in der U-Bahn, fallen wir auf. Allerdings ist das Produkt nicht ausgereift.
    Ein Test von Oliver Nickel

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Daily Deals • Last Minute Angebote bei Amazon • Crucial-RAM zu Bestpreisen (u. a. 16GB Kit DDR4-3600 73,99€) • HP 27" FHD 165Hz 199,90€ • Razer Iskur X Gaming-Stuhl 239,99€ • Adventskalender bei MM/Saturn (u. a. Surface Pro 7+ 849€) • Alternate (u. a. Adata 1TB PCIe-4.0-SSD für 129,90€) [Werbung]
    •  /