Your SlideShare is downloading. ×
jQtouch, Building Awesome Webapps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQtouch, Building Awesome Webapps

9,655

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,655
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
219
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. www.berttimmermans.com @berttimmermans
  • 2. “ jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.” http://www.jqtouch.com
  • 3. ! iOS
  • 4. Extensions Themes Geolocation Screen rotation CSS3 HTML5 Offline caching jQuery MIT Licensed Custom animations
  • 5. Examples Cases
  • 6. http://showtime-app.com/
  • 7. http://campaignmonitor.com/
  • 8. http://keypointapp.com/
  • 9. How to build your own ?
  • 10. Demo / index.html 1 OF 2 <!DOCTYPE> <html> ! <head> ! ! <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ! ! <title> Demo </title> ! ! ! ! <!-- css --> ! ! <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"/> ! ! <!-- javascript --> ! ! <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>
  • 11. Demo / index.html 2 OF 2 <body> ! ! <div id="home" class="current"> ! ! ! <div class="toolbar"> ! ! ! ! <h1>Hello world !</h1> ! ! ! ! <a class="button flip left" href="#settings">Settings</a> ! ! ! </div> ... ! ! </div> ! ! <div id="settings"> ! ! ! <div class="toolbar"> ! ! ! ! <a class="button flip 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>
  • 12. Demo / js / master.js $.jQTouch({ ! icon: 'img/icon.png', ! addGlossToIcon: false, ! startupScreen: 'img/default.png' ! });
  • 13. Some practical tips
  • 14. 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){ ! ! ... });
  • 15. Tips 2 OF 2 iPhone 4 specifieke 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%; ...
  • 16. More Info + jQtouch.com + http://github.com/senchalabs/jqtouch + code.google.com/p/jqtouch/ + groups.google.com/group/jqtouch/
  • 17. THE END Vragen ?

×