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@gmail.com, Sep 23, 2009

wonderful

Comment by nimbus.s...@gmail.com, Dec 5, 2009

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.r...@gmail.com, Dec 8, 2009

thanks guys, unbelievably useful and great :))

Ondrej

http://www.xprogress.com/

Comment by akdm...@gmail.com, Feb 6, 2010

Thanks for that ! But, i've a question: Where is the "info" class ? I want to edit it, but i cannot find it :( Thanks for the answer !

Comment by jhaa...@gmail.com, Apr 12, 2010

How do you enable the apple theme? I like the jqtouch theme better but was just curious...

Comment by erle...@gmail.com, Apr 28, 2010

@jhaag75: You enable the apple theme by changing the stylesheet from jqt to apple i.e <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/themes/apple/theme.css">

Comment by jhaa...@gmail.com, May 6, 2010

Thanks! Is it possible to open additional HTML files without closing the opening an new safari window? Not external links....but a new relative HTML page.

Comment by dhananay...@gmail.com, Jun 28, 2010

how to use function animatePages(fromPage, toPage, animation, backwards)

Comment by giacomo....@gmail.com, Jul 9, 2010

Hi - I've noticed there's some form input styles missing in the theme CSS, where's the best place to post or discuss this?

Also, any thoughts on the best way to create a persistant bottom tool bar using CSS that doesn't obscure the <div> of the section? A dirty iframe or z ordering a toolbar <div> section for example?

Comment by powerji2...@gmail.com, Oct 4, 2010

Hi.. If I use "iframe" in "div" tag, fixed header toolbar doesn't work anyway. I want to using "iframe" in "div" tag, how do you use "iframe" in "div" tag? plz... BEST REGARDS

Comment by senne...@gmail.com, Dec 9, 2010

Hey, Artspot made an easily customizable jQTouch theme with support for the Retina display. You can preview and download it here: http://www.theartspot.be/blog/2010/12/08/jqtouch-theme

Comment by mrliquid...@gmail.com, Oct 3, 2011

On one of my panels i have some text that needs to be a regular bulleted list. I've tried making a new css class my list does not show as buttons, but theme.css ul classes seem to override. Any advice?

► Sign in to add a comment