Creating a Simple jQTouch Application

The user will go to a page that is the jQTouch application. This page includes jQuery, jQTouch JavaScript, jQtouch CSS, and a theme to skin the application with. While you don't need to (and shouldn't) modify the jQTouch CSS file, it is helpful to understand that the jQTouch CSS file contains the transition classes (such as slide, pop, and so forth) and defines the WebKit animations for each transition. Typically, you will use the jQTouch styles by annotating your HTML with the jQTouch classes. You can, of course, create your own styles that extend or modify jQTouch styles and you would typically place those in your own CSS file loaded after the jQTouch CSS file.

The application begins with one or more screens already preloaded. In other words, the source code to your application (your main HTML page) may declare one or more DIVs as children of the body, which will each act as a screen. If a screen isn't already marked as current (by declaring the HTML attribute class="current"), jQTouch will interpret the first DIV in the BODY tag as the first screen. Only the current screen is visible. Each screen is assumed to be a single DIV element. Preloaded screens should have IDs already assigned to them so they can be transitioned to via links in the document that contain internal anchors that represent the screen IDs.

Listing 12-1 shows a starter application for jQTouch. The jQTouch libraries must be included and you must also initialize the jQTouch library. If you are already using jQTouch in your project, be sure to include the jQuery file included in your downloaded jQTouch source to avoid a version mismatch. To get started, copy the jQTouch and themes directories to the root of your web application (or simply experiment at the root of the folder created when you unzip the jQTouch download).

As is common practice, this example initializes jQTouch in a script tag in the HTML header. (Optional initialization parameters are discussed later in this chapter.) This example uses a toolbar, which is an optional component, but commonly used in most mobile applications. To get started, copy the jQTouch and themes directories to the root of your web application with apple theme.

Listing 12-1. Starter

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript"></script> <script src="jqtouch/jqtouch.js" type="text/javascript"></script> <link rel="stylesheet" href="jqtouch/jqtouch.css" type="text/css"/> <link rel="stylesheet" href="themes/apple/theme.css" type="text/css"/> <script>

var jqt = $.jQTouch(); </script> </head> <body>

<div class="toolbar">

Figure 12-1 shows what this example looks like running in the Safari desktop browser, which is recommended for quick iterative development.

Figure 12-1. Starter application with apple theme jQTouch ships with an alternate "jqt" theme. You can change the full look of your application simply by specifying an alternate theme, as shown in Listing 12-2. Figure 12-2 shows what this example looks like running in the Safari desktop browser with the jqt theme.

Listing 12-2. Including the jqt Theme

<link rel="stylesheet" href="themes/jqt/theme.css" type="text/css"/>

Home

Figure 12-2. Starter application with the jqt theme

A theme is a directory made up of a CSS file and images. The jqt theme3 will give your application a jQTouch skin and is used by most of the jQTouch demos. The apple theme4 simulates a native iPhone UIKit interface. The behavior of the application remains the same across themes, only the look is changed.

App Gangster

App Gangster

Get All The Support And Guidance You Need To Be A Success At Dominating Apps. This Book Is One Of The Most Valuable Resources In The World When It Comes To Becoming The Godfather Of Smart Phone Apps.

Get My Free Ebook


Responses

  • Tommy Haag
    How to create jqtouch apps for android?
    10 months ago

Post a comment