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
wonderful
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)?
thanks guys, unbelievably useful and great :))
Ondrej
http://www.xprogress.com/
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 !
How do you enable the apple theme? I like the jqtouch theme better but was just curious...
@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">
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.
how to use function animatePages(fromPage, toPage, animation, backwards)
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?
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
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
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?