Calx Part 2 – jQTouch Calx

A couple of simple calculators to play with the jqtouch library.  To best view it check it out on a webkit browser such as the iPhone / iPod Touch, Safari, or Chrome.  Although it functions in Firefox, you lose the webkit fanciness.
http://labs.stingrayengineering.com/jqtcalx.html

The Gist:

Create a basic html page with a “home” div.  In the home div add another div with the id “toolbar”.  Everything outside the toolbar div is effectively treated as the “body” of the “page” by jqtouch.  Within the “body” (not an actualy html body tag), create an unordered list with li items for each of the sub-components (in this case calculators and an about section).

<div id="Home">

<div class="toolbar">
 <h1>Stingray Calculators</h1>
 <a class="button dissolve" href="#About">About</a>
 </div>
 <h2>A collection of calculators made iPod / webkit Friendly by jqtouch.</h2>
 <ul class="rounded">
 <li class="arrow"><a href="#Finance">Car Financing</a></li>
 <li class="arrow"><a href="#Lease">Car Lease</a></li>
 <li class="arrow"><a href="#Mortgage">Home Mortgage</a></li>
 </ul>
 <br/>
 <ul class="rounded">
 <li class="arrow"><a href="#About">About</a></li>
 </ul>

</div>

This just gives you a standard html page since we haven’t told the page about jqtouch just yet.  We need to reference the js and css files (the css below is basically the default jqt theme with one or two edits:

   <script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>

   <script src="jqtouch/jqtouch.js" type="text/javascript" charset="utf-8"></script>

   <link rel="stylesheet" href="jqtouch/jqtouch.css" type="text/css" media="screen" />

   <link rel="stylesheet" href="themes/sting/theme.css" type="text/css" media="screen" />

But that didn’t quite do it since we need to init jqtouch.

            var jQT = new $.jQTouch({

                icon: 'jqtouch.png',

                addGlossToIcon: true,

                startupScreen: 'jqt_startup.png',

                statusBar: 'black',

            });

Now you have a basic “home” section of your application but the links don’t quite point to anything since we didn’t define the sections defined in the “home” section.  Let’s just build 1 of the content for the sub-components.

<div id="Finance">

  <div class="toolbar">

                        <h1>Finance Calculator</h1>

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

  </div>

  <form id="financecalc">

    <ul class="edit rounded">

    <li>Price: <input id="price" type="text" value="25000" onChange="CFormat(this);calculateFinance();"/></li>

    <li>Down Payment: <input id="dpamount" type="text" value="5000" onChange="CFormat(this);calculateFinance();"/></li>

    <li>Rate: <input id="ir" type="text" value="1.9" onChange="calculateFinance();"/></li>

    <li>Tags: <input id="tags" type="text" value="200" onChange="calculateFinance();"/></li>

    <li>Term: <input id="term" type="text" value="60" onChange="calculateFinance();"/></li>

    <li>Payment: <input id="pmt" type="text" value="" /></li>

    <li>Taxes: <input id="tax" type="text" value="1.06" onChange="calculateFinance();"/></li>

    <li>Total Financed: <input id="total" type="text" value="" /></li>

    <li><input type="button" onclick="calculateFinance()" value="Calculate"></li>

    </ul>

    </form>

</div>

That is basically it.  Note that in the above the toolbar section has an a tag with a class “button back” and points to the default section so you can use the browser’s back button or click the button in the toolbar.