jQtouch, Building Awesome Webapps
20
-
date post
19-Oct-2014 -
Category
Technology
-
view
10.863 -
download
0
description
Transcript of jQtouch, Building Awesome Webapps
“ jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.”
http://www.jqtouch.com
iOS!
HTML5CSS3
jQuery Offline caching
GeolocationScreen rotation
Custom animations
Themes
MIT Licensed
Extensions
Examples Cases
How to build your own ?
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
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
Demo / js / master.js
$.jQTouch({ ! icon: 'img/icon.png', ! addGlossToIcon: false, ! startupScreen: 'img/default.png'! });
Some practical tips
<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
<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
More Info
+ jQtouch.com
+ http://github.com/senchalabs/jqtouch
+ code.google.com/p/jqtouch/
+ groups.google.com/group/jqtouch/
THE ENDVragen ?
