Getting Started with jQTouch

At the time of writing, the current stable release of jQTouch that is available for download from the jQTouch web site is version 1, beta 2. Due to some changes that are going to be coming in a future release of the library, however, it is recommended that a more recent release be obtained from GitHub. The latest source snapshot can be downloaded from the following URL:

https://github.com/senchalabs/jQTouch/zipball/master

NOTE: If you encounter any problems using the latest version of jQTouch from GitHub, then it is probably worth checking the jQTouch web site to see if a new release has been published since the publication of this book. Alternatively, the version of jQTouch files used in the samples are available through the Apress source code repository for the book (at www.apress.com), so you can always take a look there also.

Once you have a copy of the jQTouch files, you should have a folder structure similar to the one displayed in Figure 11–7.

CHAPTER 11: Mobile UI Frameworks Compared

Figure 11–7. The folder structure for jQTouch contains the source code and some useful demos. Within the jQTouch files there are two main directories of interest. The first is jqtouch,

which contains the core JavaScript and CSS files required when using jQTouch, and the second is themes directory, which contains CSS and image resources that are used to

customize the look and feel of a jQTouch application. jQTouch also provides samples in its demos directory—these are well worth a look if you

Download from Wow! eBook <www.wowebook.com>

are interested in seeing what jQTouch can do. For our Moundz jQTouch app, we will need to copy both the jqtouch and themes

directories into our jQTouch challenge directory. Figure 11–8 shows how the structure of that folder should look after copying the files.

CHAPTER 11: Mobile UI Frameworks Compared

Figure 11–8. Copy the jqtouch and themes folders from the jQTouch distribution into the Moundz challenge folder.

There are only a few modifications we need to make to our code to make it usable for jQTouch.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

MOUNDZ.init(); } // initialize </script> </head> <body onload="initialize()">

CHAPTER 11: Mobile UI Frameworks Compared

... </body> </html>

Essentially, to get jQTouch in a position where it is ready to be used, we need to include jqtouch.js, jqtouch.css, and an appropriate theme file. In this particular case, we’re using the default theme, but both apple and jqt are also available.

In the next section, we will need to make changes to our HTML, CSS, and JavaScript files so that the application will behave as it should.

Getting Started with jQTouch