Book Image

PhoneGap 3.x Mobile Application Development HOTSHOT

By : Kerri Shotts
Book Image

PhoneGap 3.x Mobile Application Development HOTSHOT

By: Kerri Shotts

Overview of this book

<p>PhoneGap allows you to use your existing knowledge of HTML, CSS, and JavaScript to create useful and exciting mobile applications.<br /><br />This book will present you with 12 exciting projects that will introduce you to the dynamic world of app development in PhoneGap. Starting with their design and following through to their completion, you will develop real-world mobile applications. Each app uses a combination of core PhoneGap technologies, plugins, and various frameworks covering the necessary concepts you can use to create many more great apps for mobile devices.</p>
Table of Contents (21 chapters)
PhoneGap 3.x Mobile Application Development HOTSHOT
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Modifying the Start view


At this point, you could run the app on your device and play the game, but you wouldn't be able to see the high scores. In order for that to work, we need to modify the Start view a little. When done, it'll look like what is shown in the following screenshot:

Getting on with it

First, we need to modify the template a little bit (in www/html/startView.html), shown as follows:

<html>
  <body>
    <div class="ui-container">
      <div class="game-title">%APP_TITLE%</div>
      <div class="game-actions action-group">
        <div class="game-play button">%PLAY%</div>
        <div class="game-options button">%OPTIONS%</div>
        <div class="game-high-scores button">%HIGH_SCORES%</div>
      </div>
    </div>
  </body>
</html>

Next, we need to adjust the styling a little bit in www/css/style.css, since we now need to display the three buttons differently on small screens. Consider...