Contenu connexe Similaire à jQuery Mobile: For Fun and Profit (20) Plus de Daniel Cousineau (6) jQuery Mobile: For Fun and Profit1. for fun and profit
jQuery Mobile © 2010 The jQuery Project http://jquerymobile.com/
4. Multi
Platform
Images from jquerymobile.com
8. More Details
Built on jQuery
Lightweight (12k compressed)
Progressive Enhancement
HTML5
Accessibility baked-in (WAI-ARIA)
Modular & Theme-able
11. <!DOCTYPE html> <!DOCTYPE html>
<html>
<html>
<head>
<title>Page Title</title> <head>
<link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <title>Hello World</title>
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script src="path/to/sencha-touch.js" type="text/javascript"></script>
<script type="text/javascript" src="/path/to/jquery.mobile.js"></script>
</head> <link href="path/to/sencha-touch.css" rel="stylesheet" type="text/css" />
<body> <script type="text/javascript">
<div data-role="page">
new Ext.Application({
<div data-role="content"> launch: function() {
<p>Hello World.</p>
new Ext.Panel({
</div> fullscreen: true,
</div>
html: 'Hello World!'
</body>
</html> });
}
});
</script>
</head>
<body></body>
</html>
Sencha Touch © 2011 Sencha, Example from Sencha Touch Hello World
12. <!DOCTYPE html> <!DOCTYPE html>
<html>
<html>
<head>
<title>Page Title</title> <head>
<link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <title>Hello World</title>
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script src="path/to/sencha-touch.js" type="text/javascript"></script>
<script type="text/javascript" src="/path/to/jquery.mobile.js"></script>
</head> <link href="path/to/sencha-touch.css" rel="stylesheet" type="text/css" />
<body> <script type="text/javascript">
<div data-role="page">
new Ext.Application({
<div data-role="content"> launch: function() {
<p>Hello World.</p>
new Ext.Panel({
</div> fullscreen: true,
</div>
html: 'Hello World!'
</body>
</html> });
}
});
</script>
Semantic & </head>
<body></body>
Progressive Refinement </html>
Sencha Touch © 2011 Sencha, Example from Sencha Touch Hello World
13. In The Beginning
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" href="/path/to/jquery.mobile.css" />
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery.mobile.js"></script>
</head>
<body>
</body>
</html>
15. In The Beginning
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" href="/path/to/jquery.mobile.css" />
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script>
$( document ).bind("mobileinit", function() {
$.extend( $.mobile, {
configurationKey: configurationValue
});
});
</script>
<script type="text/javascript" src="/path/to/jquery.mobile.js"></script>
</head>
<body>
</body>
</html>
16. Think In Pages
<div data-role=”page” />
Only 1 visible at any time
Multiple allowed per document
You can write a single-file application
Contains header, footer, and content area
17. <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" href="/path/to/jquery.mobile.css" />
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script>
$( document ).bind("mobileinit", function() {
$.extend( $.mobile, {} );
});
</script>
<script type="text/javascript" src="/path/to/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
18. Progressive Enhancement
Uses the HTML5 data-* attributes to auto-enhance
and configure widgets
data-role is now the center of your world.
E.g. To create a button, add a <a href=”#” data-
role=”button”>LABEL</a> and jQuery Mobile will
automagically set it up during page creation.
19. <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" href="/path/to/jquery.mobile.css" />
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script>
$( document ).bind("mobileinit", function() {
$.extend( $.mobile, {} );
});
</script>
<script type="text/javascript" src="/path/to/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<a href="#">Normal Link</a>
<a href="#" data-role="button">Button</a>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
21. Load jQueryMobile JS mobileinit
domready
pagebeforechange
pagebeforecreate Enhance Page pagecreate
pagehide pagebeforeshow
pagebeforehide Navigate pageshow
pagechange
22. Touch Events
tap
taphold
swipe
swipeleft
swiperight
orientationchange
scrollstart
scrollstop
24. Auto-‘AJAX’
By default, all local links get a click listener
Can be disabled
Overrides default action:
Fires XMLHTTP request for target
Pulls <div data-role=”page”></div> from
results, inserts into DOM
Transitions to displaying the new target page
26. Auto-‘AJAX’
CAUTION: There is no baked-in way to pass
parameters to AJAX’ed pages
Sever side via GET requests to back-end
Use #page?key=value, manually parse window.location
Disable / override hash listener