Microsoft Word - chap03.doc3-1 jQuery Mobile
Mobile Web 1.2.0
WebMatrix jQuery Mobile
3-1-1 jQuery Mobile
jQuery User Interface
SystemUI Web
JavaScript HTML
Mobile Web
Framework
HTMLJavaScript CSS
Mobile Web
2 HTML5 HTML <script>
JavaScript
JavaScript
jQuery Mobile
jQuery JavaScript
PNGimages
Windows Phone 7.0~7.5
Palm WebOS 1.42.03.0
Kindle 3 and Fire
3-5
3-2 Viewport
Mobile
iOSGoogle Android Windows Phone
HTML5CSS3 JavaScript
Express for Web Opera Mobile Emulator Windows
8 Mobile
3-6
Ribbon >...
3-7
WebMatrix
iPhone Simulator
File>Exit iPhone
Opera Mobile Emulator
jQuery Mobile
Opera Mobile Emulator
Mobile Mobile
http://www.opera.com/developer/tools/mobile/
Opera_Mobile_Emulator_12.1_Windows.exe
Opera Mobile Emulator Windows Opera
Mobile Emulator
C:\Program Files (x86)\Opera Mobile Emulator
Next
Finish Opera Mobile Emulator
3-10
3-2-2 Meta Viewport
Meta
<meta> name viewport WebKit
content
width device-width
height device-height
initial-scale viewport 1 1 viewport 1 1
user-scalable 1yes true 0no false
minimum-scale 0~10
maximum-scale 0~10
3-11
Android
target-densityDpi Mobile dpiDots per Inch device-dpi dpi
high-dpimedium-dpi low-dpi dpi 70~400
Ch3_2_2.html<head> Meta
Viewport Mobile
<title>Ch3_2_2.html</title>
Mobile
iPhone Simulator Mobile
WebMatrix iPhone Simulator Mobile
Ch3_2_2.html
WebMatrix Ribbon
Simulator
iPhone Simulator HTML
3-13
Opera Mobile Emulator Mobile
Opera Mobile Emulator Launch Opera
Mobile EmulatorOpera Mobile Emulator
Opera Mobile Emulator 1 English
Opera Mobile
Emulator
Launch Opera
Mobile Emulator
iPhone Simulator Opera Mobile Emulator
WebMatrix jQuery Mobile
jQuery Mobile jQuery Mobile
jQuery jQuery Mobile
3-15
jQuery Mobile
ZIP FileZip File: jquery.mobile-1.2.0.zip
JavaScript CSS image
jquery.mobile-1.2.0.zip
3-16
demos jQuery Mobile
jQuery Mobile jQuery Mobile
CSS JavaScript jquery.mobile.min.css
jquery.mobile.min.js
jQueryhttp://jquery.com/download/
ADVANCED/EXPERIMENTAL OPTIONS
jQuery 1.8.2Minified
jQuery
jquery-1.8.2.min.js jQuery jQuery
jquery.min.js
jQuery.mobile.min.cssjquery.mobile.min.js
WebMatrix Ch03
3-3-3 HTML jQuery Mobile
HTML jQuery Mobile
CDNContent Delivery Network
jQuery Mobile
jQuery Mobile HTML
JavaScript jQuery jQuery Mobile
<link rel="stylesheet" href="jquery.mobile.min.css">
<script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>
<link> CSS 2
<script> jQuery JavaScript 3 jQuery Mobile
JavaScript 1 <script> jQuery
JavaScript jQuery Mobile
JavaScript HTML
CDN
<link rel="stylesheet"
jQuery Mobile
WebMatrixIIS Express iPhone Simulator Windows 8
jQuery Mobile
HTML5 DOCTYPE
DOCTYPE
<meta> 3-2-2 meta
Viewport
<head> <link> <script>
jQuery jQuery Mobile
<script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>
3-20
</div>
Open Source
jQuery jQuery Mobile
</p>
<div data-role="content"> <div
data-role="footer">
06: <title>Ch3_4.html</title>
08: <script src="jquery.min.js"></script>
09: <script src="jquery.mobile.min.js"></script>
15: </div>
18: Open Source
19: jQuery jQuery Mobile
20: </p>
21: </div>
24: </div>
25: </div>
26: </body>
27: </html>
JavaScript
Opera Mobile Emulator
Opera Mobile
Emulator
URL
Mobile
jQuery Mobile
HTML
page <div>
3-23
HTML
Markup Language
4
jQuery Mobile
jQuery Mobile
data-*<div data-role="page"> data-role page
jQuery Mobile URL
HTML5 data-role div
page <div> 3 <div>
headercontent footer
<div data-role="page">
<div data-role="header">
</div>
Open Source
jQuery jQuery Mobile
</p>
jQuery Mobile
<div>
data-position="fixed"
contentheader footer
header footer
5
jQuery Mobile
header
content
footer
dialog
navbar
button
controlgroup
3-6 jQuery Mobile
jQuery Mobile CSS
a~z
5a~e 26a~z
jQuery Mobile a~z
Global Definitions
ThemeRoller
3-27
jQuery Mobile
header data-theme b b
Opera Mobile Emulator
06: <title>Ch3_6_1.html</title>
08: <script src="jquery.min.js"></script>
09: <script src="jquery.mobile.min.js"></script>
14: <h1>Ch3_6_1.html</h1>
18: <div data-role="navbar">
20: <li><a href="#" data-theme="a">
a</a></li>
21: <li><a href="#" data-theme="b">
b</a></li>
22: <li><a href="#" data-theme="c">
c</a></li>
23: <li><a href="#" data-theme="d">
d</a></li>
3-29
24: <li><a href="#" data-theme="e">
e</a></li>
25: </ul>
26: </div>
27: </div>
28: </div>
29: </body>
30: </html>
3-6-2 ThemeRoller
ThemeRoller
+ 26
C
Corner Radii
IconBox Shadow
26 a~z
+
3-34
index.htmlthemes
my-custom-theme.min.css CSS
jquery.mobile.structure-x.x.min.css x.x jQuery
Mobile jQuery Mobie
<script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>
2 jquery.mobile.structure.min.css
jQuery Mobile Ch3_6_4.html
3-36
Opera Mobile Emulator
09: <script src="jquery.min.js"></script>
10: <script src="jquery.mobile.min.js"></script>
16: </div>
18: <p>ASP.NET Mobile Web
19: Open Source
20: jQuery jQuery Mobile
21: </p>
24: <h1>: </h1>
25: </div>
26: </div>
27: </body>
28: </html>
ab c
Chapter 03
2. iPhone Simulator Opera Mobile Emulator
3. jQuery Mobile JavaScript CSS
4. jQuery Mobile
5. jQuery Mobile <div data-role="page">
8. jQuery Mobile ThemeRoller
4 7
jQuery Mobile
