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
  • PrintPrint
Share this Page URL
Help

Hour 23. Building an App with PhoneGap a... > Including jQuery Mobile in Your Proj...

Including jQuery Mobile in Your Project

While it is possible to port just about any web app that currently uses jQuery Mobile to PhoneGap, the integration process depends heavily on how the web application behaves. For the sake of simplicity we are going to port a simple calculator that works as a web application into the PhoneGap project. The calculator is made up of three pages and uses jQuery Mobile for function and style. Listing 23.3 shows the index.html file that we will use.

Listing 23.3 The Ratio Calculator and Starting Page


 1: <!DOCTYPE html>
 2: <html>
 3:   <head>
 4:     <title>WebCalc</title>
 5:     <meta name="viewport" content="width=device-width, initial-scale=1">
 6:     <link rel="stylesheet" href="css/jquery.mobile-1.1.0-rc.1.min.css" />
 7:     <link rel="stylesheet" href="css/styles.css" />
 8:     <script src="cordova-1.5.0.js"></script>
 9:     <script src="javascript/jquery-1.7.1.min.js"></script>
10:     <script src="javascript/scripts.js"></script>
11:     <script src="javascript/jquery.mobile-1.1.0-rc.1.min.js"></script>
12:   </head>
13:   <body>
14:     <div data-role="page" id="ratio">
15:       <div data-role="header" data-id="header-nav">
16:         <h1>WebCalc - Ratio</h1>
17:         <div data-role="navbar">
18:           <ul>
19:             <li><a href="phi.html" data-direction="reverse" data-transition="flow">Phi</a></li>
20:             <li><a href="index.html" class="ui-btn-active ui-state-persist">Ratio</a></li>
21:             <li><a href="divisible.html" data-transition="flow">Divisible</a></li>
22:           </ul>
23:         </div>
24:       </div>
25:       <div data-role="content">
26:         <h3 class="center">Ratio Calculator</h3>
27:         <p><em>Width x Height = Aspect Ratio</em></p>
28:         <div data-role="fieldcontain" class="ui-hide-label">
29:           <div class="ui-grid-c">
30:             <div class="ui-block-a">
31:               <label for="ratio-width">Width:</label>
32:               <input type="text" name="ratio-width" id="ratio-width" placeholder="Width" />
33:             </div>
34:             <div class="ui-block-b center lh-two-em">x</div>
35:             <div class="ui-block-c">
36:               <label for="ratio-height">Height:</label>
37:               <input type="text" name="ratio-height" id="ratio-height" placeholder="Height"/>
38:             </div>
39:             <div class="ui-block-d">&nbsp;</div>
40:           </div>
41:           <div class="lh-two-em bold">
42:             Ratio (Aspect) = <span class="ratio-aspect">0</span>
43:           </div>
44:         </div>
45:         <hr />
46:         <p><em>Calculated ratio based on original values</em></p>
47:         <div>
48:           <div data-role="fieldcontain" class="ui-hide-label">
49:             <div class="ui-grid-c">
50:               <div class="ui-block-a">
51:                 <label for="ratio-cWidth">Width:</label>
52:                 <input type="text" name="ratio-cWidth" id="ratio-cWidth" placeholder="Width" />
53:               </div>
54:               <div class="ui-block-b center lh-two-em">x</div>
55:               <div class="ui-block-c lh-two-em bold" id="ratio-cHeight">?</div>
56:               <div class="ui-block-d">&nbsp;</div>
57:             </div>
58:             <div class="lh-two-em">Ratio (Ascpect) = <span class="ratio-aspect">0</span></div>
59:           </div>
60:         </div>
61:         <hr />
62:         <input type="button" name="ratio-btn-reset" id="ratio-btn-reset" value="Reset Values" />
63:       </div>
64:     </div>
65:   </body>
66: </html>


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free 10-Day Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint