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>
var jqt = $.jQTouch(); </script> </head> <body>
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"/>
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.
Was this article helpful?