Adding the Settings Panel

We haven’t yet created a button that will allow users to navigate to a Settings panel, so let’s add one to the toolbar on the Home panel. All it takes is a single line of HTML, shown in bold:

</head>
<body>
  <div id="home">
    <div class="toolbar">
        <h1>Kilo</h1>
        <a class="button flip" href="#settings">Settings</a>1
    </div>
    <ul class="edgetoedge">
        <li class="arrow"><a href="#dates">Dates</a></li>
        <li class="arrow"><a href="#about">About</a></li>
    </ul>
  </div>
... remaining HTML not shown ...
1

This is the line of HTML that adds the button (Figure 4-8). Notice that we’ve assigned the flip class to the link. The flip class instructs jQTouch to transition from the Home panel to the Settings panel by rotating the page on its vertical axis. To give an added dimension to the process, the page actually zooms out a bit during the animation. Fancy, no?

Note

Unfortunately, support for 3D animations is spotty across mobile platforms, including Android. Therefore flip, swap, cube, and any other 3D animations will failover to 2D animations when 3D is not supported.

The Settings button added to the toolbar on the Home panel

Figure 4-8. The Settings button added to the toolbar on the Home panel

After working on the New Entry panel, the HTML for the Settings panel is going to look pretty similar (Example 4-6). There is one more text input and some of the attributes have been omitted or have different values, but conceptually they are identical. Add this to your HTML document just as you’ve done with the HTML for the other panels.

As with the New Entry form, the Settings form does not currently save any of the information associated with it (see Figure 4-9). Its submission handler will be described in the next chapter.

Example 4-6. The HTML for the Settings panel

<div id="settings">
    <div class="toolbar">
        <h1>Settings</h1>
        <a class="button cancel" href="#">Cancel</a>
    </div>
    <form method="post">
        <ul class="rounded">
            <li><input placeholder="Age" type="text" name="age" id="age" /></li>
            <li><input placeholder="Weight" 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="Save Changes" /></li>
        </ul>
    </form>
</div>
The Settings panel

Figure 4-9. The Settings panel

Get Building Android Apps with HTML, CSS, and JavaScript, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial