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

Like this? Share it with your network

Share

jQtouch, Building Awesome Webapps

on

  • 10,886 views

 

Statistics

Views

Total Views
10,886
Views on SlideShare
10,803
Embed Views
83

Actions

Likes
4
Downloads
218
Comments
0

4 Embeds 83

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQtouch, Building Awesome Webapps Presentation 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 ?