CorejQTouch 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. ThemesThemes 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 StructureMost 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/