Download Safari Books Online apps: Apple iOS | Android

Entire Site

Safari Books Online

    Free Trial

    Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


    • Create BookmarkCreate Bookmark
    • Create Note or TagCreate Note or Tag
    • DownloadDownload
    • PrintPrint
    Share this Page URL
    Help

    4. Animation > Alles zusammenfügen

    Alles zusammenfügen

    Damit haben wir es! Mit weniger als 100 Zeilen Code haben wir eine iPhone-isierte Benutzeroberfläche für eine Applikation mit sechs Bedienfeldern inklusive Animationen für die Seitenübergänge erstellt. Listing 4.7 zeigt den gesamten fertigen HTML-Code.

    <html>
    <head>
        <title>Kilo</title>
        <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
        <link type="text/css" rel="stylesheet" media="screen"
            href="themes/jqt/theme.css">
        <script type="text/javascript" src="jqtouch/jquery.js"></script>
        <script type="text/javascript" src="jqtouch/jqtouch.js"></script>
        <script type="text/javascript">
            var jQT = $.jQTouch({
                icon: 'kilo.png',
                statusBar: 'black'
            });
        </script>
    </head>
    <body>
        <div id="home">
            <div class="toolbar">
                <h1>Kilo</h1>
                <a class="button flip" href="#settings">Einstellungen</a>
            </div>
            <ul class="edgetoedge">
                <li class="arrow"><a href="#dates">Daten</a></li>
                <li class="arrow"><a href="#about">&Uuml;ber Kilo</a></li>
            </ul>
        </div>
        <div id="about">
            <div class="toolbar">
                <h1>&Uuml;ber Kilo</h1>
                <a class="button back" href="#">Zur&uuml;ck</a>
            </div>
            <div>
                <p>Mit Kilo k&ouml;nnen Sie &uuml;ber Ihr Essen Tagebuch f&uuml;hren.</p>
            </div>
        </div>
        <div id="dates">
            <div class="toolbar">
                <h1>Daten</h1>
                <a class="button back" href="#">Zur&uuml;ck</a>
            </div>
            <ul class="edgetoedge">
                <li class="arrow"><a id="0" href="#date">heute</a></li>
                <li class="arrow"><a id="1" href="#date">gestern</a></li>
                <li class="arrow"><a id="2" href="#date">vor zwei Tagen</a></li>
                <li class="arrow"><a id="3" href="#date">vor drei Tagen</a></li>
                <li class="arrow"><a id="4" href="#date">vor vier Tagen</a></li>
                <li class="arrow"><a id="5" href="#date">vor fünf Tagen</a></li>
            </ul>
        </div>
        <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>
            </div>
            <ul class="edgetoedge">
                <li id="entryTemplate" class="entry" style="display:none">
                    <span class="label">Beschreibung</span>
                    <span class="calories">000</span>
                    <span class="delete">L&ouml;schen</span>
                </li>
            </ul>
        </div>
        <div id="createEntry">
            <div class="toolbar">
                <h1>Neuer Eintrag</h1>
                <a class="button cancel" href="#">Abbrechen</a>
            </div>
            <form method="post">
                <ul>
                    <li><input type="text" placeholder="Essen"
                        name="food" id="food" autocapitalize="off"
                        autocorrect="off" autocomplete="off" /></li>
                    <li><input type="text" placeholder="Kalorien"
                        name="calories" id="calories" autocapitalize="off"
                        autocorrect="off" autocomplete="off" /></li>
                    <li><input type="submit" class="submit" name="action"
                        value="Eintrag speichern" /></li>
                </ul>
            </form>
        </div>
        <div id="settings">
            <div class="toolbar">
                <h1>Einstellungen</h1>
                <a class="button cancel" href="#">Abbrechen</a>
            </div>
            <form method="post">
                <ul>
                    <li><input placeholder="Alter" type="text" name="age" id="age" /></li>
                    <li><input placeholder="Gewicht" type="text" name="weight"
                        id="weight" /></li>
                    <li><input placeholder="Budget" type="text" name="budget"
                        id="budget" /></li>
                    <li><input type="submit" class="submit" name="action"
                        value="&Auml;nderungen speichern" /></li>
                </ul>
            </form>
        </div>
    </body>
</html>

    Listing 4.7 Der fertige HTML-Code für die App mit sechs Bedienfeldern