Core

jQTouch requires one basic theme to make page transitions work which is very small and located in css/jqtouch.css. One could use just the core CSS file to build a completely custom UI.

Themes

Themes are additional CSS files which provide native-looking styles, mostly centered around the iPhone OS. Themes included are: Apple (looking like the iPhone), and jQT (custom style based on Apple, but darker, more universal looking).

Classes and Structure

Most importantly, jQTouch takes any direct descendent under the <body> and converts it into a full-screen panel that can be animated in/out. Typically, one uses a series of <div>s that make up your app's various screens, often with <ul>s within to represent list. A simple list menu looks like:

    <div id="demolist">
        <div class="toolbar">
            <h1>Demo List</h1>
            <a class="back" href="#">Back</a>
        </div>
        <h4>Options</h4>
        <ul class="rounded">
            <li><a href="#item1">Item 1</a></li>
            <li><a href="#item2">Item 2</a></li>
            <li><a href="#item3">Item 3</a></li>
        </ul>
    </div>

SImple classes can be added to <ul> elements to change their style, such as:

edgetoedge
plastic
metal
form

Comment by wanglin.gid, Sep 23, 2009

wonderful

Comment by nimbus.software, Dec 05 (3 days ago)

Using DIVs is great. But what if you want a footer tool bar like iphone.appleinsider.com (use an iPhone or switch to the iPhone user agent in Safari to view)?

Comment by ondrej.rafaj, Yesterday (28 hours ago)

thanks guys, unbelievably useful and great :))

Ondrej

http://www.xprogress.com/