Getting Started

Download a copy of jQTouch from GitHub

1. Add Scripts and links to your HTML

jQTouch currently uses jQuery 1.4.2, which can be loaded dynamically from Google Code. In the header of your document, insert the following:

<style type="text/css" media="screen">@import "../../themes/css/jqtouch.css";</style>
<script src="../../src/lib/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>

jQuery

By default, jQTouch uses Zepto.js which has a similar API to jQuery, but is much more lightweight. If you need to use jQuery instead, simply replace the Zepto.js script above with jQuery (last tested against 1.7), and use the jQuery version of jQTouch:

2. Initialize

Initialize the function before the page onload event. To turn off a feature, simply pass a false to the corresponding option in the [initialization options](Initialization Options).

$.jQTouch({
    icon: 'jqtouch.png',
    statusBar: 'black-translucent',
    preloadImages: [
        'themes/jqt/img/chevron_white.png',
        'themes/jqt/img/bg_row_select.gif',
        'themes/jqt/img/back_button_clicked.png',
        'themes/jqt/img/button_clicked.png'
        ]
});

3. Extend

• [Initialization Options] -- Overview of all basic capabilities, including navigation, viewport control, and image preloading.
• [Callback Events] -- How to receive notifications from jQTouch.