jQtouch, Building Awesome Webapps

www.berttimmermans.com @berttimmermans

“ jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.” http://www.jqtouch.com

Extensions Themes Geolocation Screen rotation CSS3 HTML5 Ofﬂine caching jQuery MIT Licensed Custom animations

Examples Cases

http://showtime-app.com/

http://campaignmonitor.com/

http://keypointapp.com/

How to build your own ?

Demo / index.html 1 OF 2 <!DOCTYPE> <html> ! <head> ! ! <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ! ! <title> Demo </title> ! ! ! !  ! ! <link rel="stylesheet" type="text/css" href="css/jqtouch.min.css"/> ! ! <link rel="stylesheet" type="text/css" href="theme/theme.min.css"/> ! ! <link rel="stylesheet" type="text/css" href="css/master.css"/> ! !  ! ! <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> ! ! <script src="js/jqtouch.min.js" type="text/javascript" charset="utf-8"></script> ! ! <script src="js/master.js" type="text/javascript" charset="utf-8"></script> ! </head>

Demo / index.html 2 OF 2 <body> ! ! <div id="home" class="current"> ! ! ! <div class="toolbar"> ! ! ! ! <h1>Hello world !</h1> ! ! ! ! <a class="button ﬂip left" href="#settings">Settings</a> ! ! ! </div> ... ! ! </div> ! ! <div id="settings"> ! ! ! <div class="toolbar"> ! ! ! ! <a class="button ﬂip left" href="#home">Done</a> ! ! ! ! <h1>Settings</h1> ! ! ! </div> ! ! </div> ! ! <div id="info"> ! ! ! <div class="toolbar"> ! ! ! ! <a class="back" href="#">Back</a> ! ! ! ! <h1>More info</h1> ! ! ! </div> ! ! ! .... ! ! </div> ! </body> </html>

Demo / js / master.js $.jQTouch({ ! icon: 'img/icon.png', ! addGlossToIcon: false, ! startupScreen: 'img/default.png' ! });

Some practical tips

Tips 1 OF 2 Disable scrolling <body ontouchmove="event.preventDefault();"> ... </body> Stop and start animation event $('body').bind('pageAnimationStart', function(e, info){ ! ... }).bind('pageAnimationEnd', function(e, info){ ! ! ... });

Tips 2 OF 2 iPhone 4 speciﬁeke CSS <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" /> iPhone 4 background optimization via background-size ... -webkit-background-size: 100% 100%; ...

More Info + jQtouch.com + http://github.com/senchalabs/jqtouch + code.google.com/p/jqtouch/ + groups.google.com/group/jqtouch/

THE END Vragen ?

http://janaksodha.com	66
http://myelearning.cavehill.uwi.edu	14
http://paper.li	2
http://www.portalclip.com.br	1

jQtouch, Building Awesome Webapps

by Home on Sep 11, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 83

Statistics

jQtouch, Building Awesome Webapps — Presentation Transcript