jqtouch, building awesome webapps
Post on 19-Oct-2014
10.869 views
DESCRIPTION
TRANSCRIPT
![Page 1: jQtouch, Building Awesome Webapps](https://reader033.vdocuments.site/reader033/viewer/2022050807/54439e3aafaf9f550d8b45db/html5/thumbnails/1.jpg)
![Page 3: jQtouch, Building Awesome Webapps](https://reader033.vdocuments.site/reader033/viewer/2022050807/54439e3aafaf9f550d8b45db/html5/thumbnails/3.jpg)
“ jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.”
http://www.jqtouch.com
![Page 4: jQtouch, Building Awesome Webapps](https://reader033.vdocuments.site/reader033/viewer/2022050807/54439e3aafaf9f550d8b45db/html5/thumbnails/4.jpg)
iOS!
![Page 5: jQtouch, Building Awesome Webapps](https://reader033.vdocuments.site/reader033/viewer/2022050807/54439e3aafaf9f550d8b45db/html5/thumbnails/5.jpg)
HTML5CSS3
jQuery Offline caching
GeolocationScreen rotation
Custom animations
Themes
MIT Licensed
Extensions
![Page 6: jQtouch, Building Awesome Webapps](https://reader033.vdocuments.site/reader033/viewer/2022050807/54439e3aafaf9f550d8b45db/html5/thumbnails/6.jpg)
Examples Cases
![Page 10: jQtouch, Building Awesome Webapps](https://reader033.vdocuments.site/reader033/viewer/2022050807/54439e3aafaf9f550d8b45db/html5/thumbnails/10.jpg)
How to build your own ?
![Page 11: jQtouch, Building Awesome Webapps](https://reader033.vdocuments.site/reader033/viewer/2022050807/54439e3aafaf9f550d8b45db/html5/thumbnails/11.jpg)
![Page 12: jQtouch, Building Awesome Webapps](https://reader033.vdocuments.site/reader033/viewer/2022050807/54439e3aafaf9f550d8b45db/html5/thumbnails/12.jpg)
![Page 13: jQtouch, Building Awesome Webapps](https://reader033.vdocuments.site/reader033/viewer/2022050807/54439e3aafaf9f550d8b45db/html5/thumbnails/13.jpg)
Demo / index.html
<!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>
1 OF 2
![Page 14: jQtouch, Building Awesome Webapps](https://reader033.vdocuments.site/reader033/viewer/2022050807/54439e3aafaf9f550d8b45db/html5/thumbnails/14.jpg)
Demo / index.html
<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>
2 OF 2
![Page 15: jQtouch, Building Awesome Webapps](https://reader033.vdocuments.site/reader033/viewer/2022050807/54439e3aafaf9f550d8b45db/html5/thumbnails/15.jpg)
Demo / js / master.js
$.jQTouch({ ! icon: 'img/icon.png', ! addGlossToIcon: false, ! startupScreen: 'img/default.png'! });
![Page 16: jQtouch, Building Awesome Webapps](https://reader033.vdocuments.site/reader033/viewer/2022050807/54439e3aafaf9f550d8b45db/html5/thumbnails/16.jpg)
Some practical tips
![Page 17: jQtouch, Building Awesome Webapps](https://reader033.vdocuments.site/reader033/viewer/2022050807/54439e3aafaf9f550d8b45db/html5/thumbnails/17.jpg)
<body ontouchmove="event.preventDefault();">...
</body>
$('body').bind('pageAnimationStart', function(e, info){ ! ...}).bind('pageAnimationEnd', function(e, info){
! ! ... });
Disable scrolling
Stop and start animation event
Tips 1 OF 2
![Page 18: jQtouch, Building Awesome Webapps](https://reader033.vdocuments.site/reader033/viewer/2022050807/54439e3aafaf9f550d8b45db/html5/thumbnails/18.jpg)
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />
...-webkit-background-size: 100% 100%;...
iPhone 4 specifieke CSS
iPhone 4 background optimization via background-size
Tips 2 OF 2
![Page 19: jQtouch, Building Awesome Webapps](https://reader033.vdocuments.site/reader033/viewer/2022050807/54439e3aafaf9f550d8b45db/html5/thumbnails/19.jpg)
More Info
+ jQtouch.com
+ http://github.com/senchalabs/jqtouch
+ code.google.com/p/jqtouch/
+ groups.google.com/group/jqtouch/
![Page 20: jQtouch, Building Awesome Webapps](https://reader033.vdocuments.site/reader033/viewer/2022050807/54439e3aafaf9f550d8b45db/html5/thumbnails/20.jpg)
THE ENDVragen ?