Building Android Apps with HTML, CSS, and JavaScript, 2nd Edition

Adding the New Entry Panel

Example 4-5 shows the source code for the New Entry panel. Add this code to the end of index.html, before the closing </body>.

Example 4-5. The HTML for the New Entry panel

<div id="createEntry">
    <div class="toolbar">
        <h1>New Entry</h1>
        <a class="button cancel" href="#">Cancel</a>
    </div>
    <form method="post">
        <ul class="rounded">
            <li><input type="text" placeholder="Food" name="food" id="food" 
                 autocapitalize="off" autocorrect="off" 
                 autocomplete="off" /></li>
            <li><input type="text" placeholder="Calories" name="calories" 
                 id="calories" autocapitalize="off" autocorrect="off" 
                 autocomplete="off" /></li>
            <li><input type="submit" class="submit" name="action"
                 value="Save Entry" /></li>
        </ul>
    </form>
</div>

The first thing to point out about the New Entry panel is that rather than having a Back button, it has a Cancel button.

Note

Cancel buttons in jQTouch behave just like back buttons: they remove the current page from view with the reverse animation that it came into view. However, cancel buttons are not shaped like a left arrow as back buttons are.

I used a Cancel button here ...