Putting It All Together

So, there you have it. With fewer than 100 lines of code, we've created a native-style UI for a five-panel application complete with three different page transition animations. See Example 4-7 for a complete listing of the final HTML. Not too shabby, right?

Example 4-7. The complete HTML listing for the five-panel UI

<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'

<div class="toolbar"> <h1>Kilo</h1>

<a class="button flip" href="#settings">Settings</a> </div>

<ul class="edgetoedge">

<li class="arrow"><a href="#dates">Dates</a></li> <li class="arrow"><a href="#about">About</a></li> </ul> </div>

<div class="toolbar"> <hl>About</hl>

<a class="button back" href="#">Back</a> </div> <div>

<p>Kilo gives you easy access to your food diary.</p> </div> </div>

<div class="toolbar"> <hl>Dates</hl>

<a class="button back" href="#">Back</a> </div>

<ul class="edgetoedge">

<li

class='

arrow"

><a

id='

0"

href='

"#date">Today</a></li>

<li

class='

arrow"

><a

id='

'1"

href='

"#date">Yesterday</a></li>

<li

class='

arrow"

><a

id='

'2"

href='

"#date">2 Days Ago</a></li>

<li

class='

arrow"

><a

id='

'3"

href='

"#date">3 Days Ago</a></li>

<li

class='

arrow"

><a

id='

'4"

href='

"#date">4 Days Ago</a></li>

<li

class='

arrow"

><a

id='

'5"

href='

"#date">5 Days Ago</a></li>

<div class="toolbar"> <hl>Date</hl>

<a class="button back" href="#">Back</a> <a class="button slideup" href="#createEntry">+</a> </div>

<ul class="edgetoedge">

<li id="entryTemplate" class="entry" style="display:none"> <span class="label">Label</span> <span class="calories">000</span> <span class="delete">Delete</span> </li> </ul> </div>

<div id="createEntry"> <div class="toolbar"> <hl>New Entry</hl>

<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>

<div id="settings">

<div class="toolbar">

<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> </body> </html>

0 0

Post a comment