Pluralsight blog Where devs, IT admins & creative pros go for news, tips, videos and more.
3,500+ tech & creative courses authored by experts - unlimited & online Get it now →
December 30, 2009

jQTouch Cheat Sheet

By
Markup
The core of a jQTouch application is the markup. Although you can use any HTML or CSS that you like, following conventions for class names and element structure offloads most of the work to the framework.
h1
A single HTML document contains many pages, each with an optional title inside the toolbar.
div.toolbar
The toolbar works as a navigation bar with a title, back button, and accessory button.
a.back
Just like native apps, pages are navigated in a stack. jQTouch handles backward navigation and animation if you include a back link in the toolbar.
Custom HTML
Although jQTouch includes styling for many elements, you don’t have to use them! Style up your own interfaces with HTML and CSS.
ul
Lists make great menus or table-like displays. Add the rounded, plastic or edgetoedge classes to an unordered list for different styles.
Images
Stock and freeware icons are easy to use and can make your app look great. A 12px square icon works best. Try Helveticons, Glyphish or Eddit.
li.arrow & li.forward
Themes include classes for indicating the clickability of list items.
JavaScript Callbacks
Use jQuery to attach to the tap event. Or bind to pageAnimationEnd to add your own custom page behavior.
h2
Subtitles separate sections.
ul.individual
This class styles unordered lists as half-width buttons.
div.info
A styled div for auxiliary notes.

About the Author

is VP of Open Source at Pluralsight. He previously founded PeepCode and is an all around entrepreneur, developer, designer, teacher and athlete. Follow him on Twitter at @topfunky.


Discussion