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

Ein Gericht im Detail
Was jetzt natürlich noch fehlt, ist die Detaildarstellung, die innerhalb der Datei
gericht-detail.html stattfindet. Kopieren Sie die Menüseite ( menue.html ), und entfer-
nen Sie alles innerhalb des content -Containers. Dem content -Container weisen Sie
noch die id gericht-inhalt zu, dem page -Container die id gericht-einzeln .
Damit der Benutzer zurück zur Liste navigieren kann, möchten Sie in der Kopfzeile
einen Zurück-Button implementieren. jQuery Mobile beinhaltet einen vorgefertig-
ten Zurück-Button, den Sie mit data-add-back-btn="true" dem page -Container hin-
zufügen. Dieser Button erscheint dann automatisch in der Kopfzeile. Den Text des
Buttons, der standardmäßig mit Back betitelt ist, ändern Sie über das Attribut data-
back-btn-text . Der fertige Code (ohne die Fußzeile) sieht nun folgendermaßen aus:
<div data-role="page" id="gericht-einzeln" data-add-back-btn="true"
data-back-btn-text="Zurück">
<div data-role="header" data-theme="b">
<h1>Gericht</h1>
</div>
<div data-role="content" id="gericht-inhalt">
<!-- Hier wird dynamisch das Gericht reingeladen -->
</div><!-- div content -->
<!-- Aus Platzgründen wurde die Fußzeile an dieser Stelle weggelassen -->
</div><!-- /page -->
Listing 8.13 Der fertige Code der Gerichtdarstellung (einzeln)
Vom Prinzip her passiert in der Seite des Gerichtdetails dasselbe wie in der Listenan-
sicht. Die JSON-Datei wird ausgelesen, und Inhalte werden ausgegeben. Der Unter-
schied ist hier jedoch, dass Sie nicht alle Elemente ausgeben, sondern nur das
Element, dessen Titel mit dem Titel aus dem sessionStorage übereinstimmt. Der
JavaScript-Code ist somit nahezu identisch und muss nur an zwei Stellen erweitert
werden. Setzen Sie den folgenden Code innerhalb an das Ende des page -Containers:
<script>
$('#gericht-einzeln').on("pageshow", function() {
// Gericht Inhalt leeren
$('#gericht-inhalt').empty();
// Aktuelles Gericht aus dem sessionStorage laden
var gericht = sessionStorage.gericht;
// JSON Datei laden
$.getJSON('gerichte.json', function(data) {