www.berttimmermans.com
@berttimmermans
“ jQuery plugin for mobile web
development on the iPhone, iPod Touch,
and other forward-thinking devices.”

http://www.jqt...
!   iOS
Extensions               Themes

                                     Geolocation
        Screen rotation



 CSS3        ...
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...
Demo / index.html                                                                2 OF 2



     <body>
  !   !    <div id=...
Demo / js / master.js

  $.jQTouch({
      ! icon: 'img/icon.png',
      ! addGlossToIcon: false,
      ! startupScreen: '...
Some practical tips
Tips                                                          1 OF 2


Disable scrolling

    <body ontouchmove="event.pre...
Tips                                                                                   2 OF 2


iPhone 4 specifieke CSS

  ...
More Info
+ jQtouch.com

+ http://github.com/senchalabs/jqtouch

+ code.google.com/p/jqtouch/

+ groups.google.com/group/j...
THE END
 Vragen ?
jQtouch, Building Awesome Webapps
jQtouch, Building Awesome Webapps
jQtouch, Building Awesome Webapps
Upcoming SlideShare
Loading in...5
×

jQtouch, Building Awesome Webapps

9,748

Published on

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

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

No notes for slide

jQtouch, Building Awesome Webapps

  1. 1. www.berttimmermans.com @berttimmermans
  2. 2. “ jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.” http://www.jqtouch.com
  3. 3. ! iOS
  4. 4. Extensions Themes Geolocation Screen rotation CSS3 HTML5 Offline caching jQuery MIT Licensed Custom animations
  5. 5. Examples Cases
  6. 6. http://showtime-app.com/
  7. 7. http://campaignmonitor.com/
  8. 8. http://keypointapp.com/
  9. 9. How to build your own ?
  10. 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. 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. 12. Demo / js / master.js $.jQTouch({ ! icon: 'img/icon.png', ! addGlossToIcon: false, ! startupScreen: 'img/default.png' ! });
  13. 13. Some practical tips
  14. 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. 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. 16. More Info + jQtouch.com + http://github.com/senchalabs/jqtouch + code.google.com/p/jqtouch/ + groups.google.com/group/jqtouch/
  17. 17. THE END Vragen ?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×