WebApps mit Frameworks entwickeln - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 312

Nach demselben Schema nun zu guter Letzt noch Titel und Untertitel:
<h3>' + item.name + '</h3>' + '<p>' + item.untertitel + '</p>
Damit sollte der komplette Code wie folgt aussehen:
$('<li><a href="gericht-detail.html" data-transition="slide" onClick="java-
script:sessionStorage.gericht=\''+item.name+'\';"><img src="bilder/
'+item.bild+'" /><h3>' + item.name + '</h3>' + '<p>' + item.untertitel +
'</p></a></li>').appendTo('#gerichteliste');
Nachdem Sie nun die JSON-Datei ausgelesen und die Listenelemente mit jQuery
zusammengebaut haben, erscheinen die Elemente bereits in der WebApp - leider
jedoch ohne die korrekte Formatierung (Abbildung 8.9).
Abbildung 8.9 Ansicht der Liste ohne die von jQuery Mobile gesetzten Stile
jQuery Mobile rendert und gestaltet alle Elemente beim Laden. Das heißt, dass Ele-
mente, die Sie nach dem Laden der Seite mit jQuery hinzufügen, nicht mehr umge-
staltet werden. Fügen Sie folgenden Code nach der Erstellung aller Listenelemente
ein, um diesen Prozess manuell anzustoßen:
$('#gerichteliste').listview('refresh');
Damit aktualisieren Sie die Gestaltung der Liste mit der id gerichteliste . Die hier
verwendeten Bilder haben wir ebenfalls aus dem Creative-Commons-Archiv von