More Related Content
Similar to jQtouch, Building Awesome Webapps (20)
jQtouch, Building Awesome Webapps
- 3. “ jQuery plugin for mobile web
development on the iPhone, iPod Touch,
and other forward-thinking devices.”
http://www.jqtouch.com
- 5. Extensions Themes
Geolocation
Screen rotation
CSS3 HTML5
Offline caching
jQuery
MIT Licensed
Custom animations
- 13. 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>
- 14. 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>
- 15. Demo / js / master.js
$.jQTouch({
! icon: 'img/icon.png',
! addGlossToIcon: false,
! startupScreen: 'img/default.png'
! });
- 17. 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){
! ! ...
});
- 18. 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%;
...
- 19. More Info
+ jQtouch.com
+ http://github.com/senchalabs/jqtouch
+ code.google.com/p/jqtouch/
+ groups.google.com/group/jqtouch/
