Das DATUM-Bedienfeld sieht den anderen Bedienfeldern sehr ähnlich, hat aber einige Erweiterungen (siehe Listing 4.4). Fügen Sie den HTML-Code für das DATUM-Bedienfeld direkt nach dem DATEN-Bedienfeld, aber noch vor dem schließenden </body> ein.

<div id="date">
    <div class="toolbar">
        <h1>Datum</h1>
        <a class="button back" href="#">Zur&uuml;ck</a>
        <a class="button slideup" href="#createEntry">+</a>1
    </div>
    <ul class="edgetoedge">
        <li id="entryTemplate" class="entry" style="display:none">2
            <span class="label">Beschreibung</span>
            <span class="calories">000</span>
            <span class="delete">L&ouml;schen</span>
        </li>
    </ul>
</div>

1 Die Titelleiste des DATUM-Bedienfelds hat einen weiteren Button. Wenn er angeklickt wird, soll das NEUER EINTRAG-Bedienfeld (das wir noch nicht eingebaut haben) angezeigt werden. Ich habe dem Link die Klasse slideup gegeben, die jQTouch sagt, dass das Zielbedienfeld von unten nach oben auf den Bildschirm geschoben werden soll (anders als beim normalen Navigationsverhalten horizontal von rechts nach links).

2 Der nächste untypische Aspekt dieses Bedienfelds ist, dass ich ein Listenelement definiert habe, für das ich die Eigenschaft style auf display:none gesetzt habe, wodurch es unsichtbar wird.

Wie Sie gleich sehen können, werde ich diesen Listeneintrag als Vorlage für neue Einträge verwenden, sobald sie erstellt worden sind. Zu diesem Zeitpunkt gibt es noch keine Einträge, und das Bedienfeld wird bis auf die Titelleiste leer sein.

Da Sie nun das DATUM-Bedienfeld eingefügt haben, wird nach einem Klick auf einen Eintrag im DATEN-Bedienfeld das leere DATUM-Bedienfeld (Abbildung 4.5) hineingeschoben.

Abbildung 4.5 Bis auf die Titelleiste ist das Datum-Bedienfeld anfangs leer.