課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)
-
Upload
jollen-chen -
Category
Education
-
view
5.762 -
download
2
description
Transcript of 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)
![Page 1: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/1.jpg)
講師:Jollen Chen <[email protected]>Blog:http://www.jollen.org/blog課程:http://www.moko365.com
課程專案:鴻海科技集團贊助課程課程名稱:八屏⼀一雲時代來臨 教你HTML5六小時打通課程日期:2012/12/19 (三)課程時間:10:00~17:00
八屏一雲時代來臨 教你HTML5六小時打通
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
本教材由仕橙3G教室製作與維護
1
![Page 2: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/2.jpg)
http://www.moko365.com/enterprise/starting-html5-app
2
![Page 3: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/3.jpg)
現場實況
3
![Page 4: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/4.jpg)
現場實況
4
![Page 5: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/5.jpg)
現場實況
5
![Page 6: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/6.jpg)
現場實況
6
![Page 7: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/7.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
LicenseThis work is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.
You are free:• to Share — to copy, distribute and transmit the work• to make commercial use of the work
Under the following conditions:
• Attribution — You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work).
• No Derivative Works — You may not alter, transform, or build upon this work.
With the understanding that:
• Waiver — Any of the above conditions can be waived if you get permission from the copyright holder.• Public Domain — Where the work or any of its elements is in the public domain under applicable law, that status
is in no way affected by the license.• Other Rights — In no way are any of the following rights affected by the license:◦ Your fair dealing or fair use rights, or other applicable copyright exceptions and limitations;◦ The author's moral rights;◦ Rights other persons may have either in the work itself or in how the work is used, such as publicity or privacy
rights.• Notice — For any reuse or distribution, you must make clear to others the license terms of this work. The best way
to do this is with a link to this web page.
7
![Page 8: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/8.jpg)
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
本教材由仕橙3G教室製作與維護
第一次寫 HTML5 就上手
8
![Page 9: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/9.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
HTML5 重要基礎<div>
<Canvas>
Web Socket
Web Storage
9
![Page 10: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/10.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
需要了解 HTML5 文件撰寫
Source: http://web-profile.com.ua/html/html5-document-structure/
<!doctype html><html><head><meta charset="utf-8"><title>page title</title></head> <body><header> header</header><nav> navigation</nav><article> <section>summary</section></article><aside> sidebar</aside><footer> footer</footer></body></html>
10
![Page 11: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/11.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
第⼀一個 HTML5 文件
11
![Page 12: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/12.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
1.html
12
![Page 13: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/13.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
2.html
13
![Page 14: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/14.jpg)
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
本教材由仕橙3G教室製作與維護
第一次畫 Layout 就上手
14
![Page 15: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/15.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
CSS pixel定義於 CSS 裡的稱為 device pixel
非眼睛所見
圖像的像素
See more: http://www.quirksmode.org/mobile/viewports.html
#content { width: 128px;}
15
![Page 16: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/16.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
device pixel螢幕 (Screen) 的顯示像素
眼睛所見
16
![Page 17: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/17.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
high-resolution1 CSS pixel 需要 16 個 device pixel
更細緻
Source: www.w3.org/TR/css3-values/
17
![Page 18: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/18.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
with zoom out4 pixel
CSS pixel 等於 device pixel
Zoom out: ⼀一個 device pixel 包含多個 CSS pixel
Source: http://www.quirksmode.org/mobile/viewports.html
18
![Page 19: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/19.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
screen size
Source: Moko365 Inc.
screen.widthscreen.height
19
![Page 20: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/20.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Screen Size 測量方式screen size 使用 device pixel 測量
20
![Page 21: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/21.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
window size
Source: Moko365 Inc.
window.innerWidthwindow.innerHeight
21
![Page 22: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/22.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
viewport
Source: Moko365 Inc.
window.innerWidthwindow.innerHeight
22
![Page 23: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/23.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
viewport
Source: Moko365 Inc.
document.documentElement.clientWidthdocument.documentElement.clientHeight
23
![Page 24: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/24.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
visual viewport
visual viewport
“the part of the page that’s currently shown on-screen”
24
![Page 25: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/25.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
layout viewport
layout viewport
25
![Page 26: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/26.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
visual 不等於 layout
visual viewport
layout viewport
26
![Page 27: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/27.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
“width=320” 1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <link href="2.css" rel="stylesheet" type="text/css" /> 7 <meta name="viewport" content="width=320"> 8 <title>我在 Android World 2012 深圳:與會心得分享</title> 9 </head>
27
![Page 28: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/28.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
content widthcontent width = 900px
使用 %
1 #content { 2 width: 900px; 3 }
28
![Page 29: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/29.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
content = documentcontent width = document width
使用 %
1 #content { 2 width: 100%; 3 }
29
![Page 30: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/30.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
content = document, and viewportbefore after
30
![Page 31: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/31.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
其它 layout 屬性margin >> border >> padding
position >> box-sizing >> z
31
![Page 32: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/32.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
更多關於 viewport只適用於 mobile browser
手機瀏覽可讓 visual viewport = layout viewport
32
![Page 33: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/33.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
visual viewport
visual viewport
“the part of the page that’s currently shown on-screen”
33
![Page 34: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/34.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
“width=device-width”3.html
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <link href="3.css" rel="stylesheet" type="text/css" /> 7 <meta name="viewport" content="width=device-width;"> 8 <title>我在 Android World 2012 深圳:與會心得分享</title> 9 </head>
34
![Page 35: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/35.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
圖片問題before after
35
![Page 36: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/36.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
圖片大小怎麼處理
1 #content { 2 width: 100%; 3 } 4 5 img { 6 width: 300px; 7 }
no good
36
![Page 37: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/37.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Media QueryCSS @media rule
<style>@media screen { p.test {font-family:verdana,sans-serif;font-size:14px;} }@media print { p.test {font-family:times,serif;font-size:10px;} }@media screen,print { p.test {font-weight:bold;} }</style>
See more: http://www.w3schools.com/css/css_mediatypes.asp
37
![Page 38: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/38.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Media Type
Source: http://www.w3schools.com/css/css_mediatypes.asp
38
![Page 39: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/39.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
不同的 Media Type
39
![Page 40: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/40.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
使用 Media Query大部份手機瀏覽器不實作 @media handheld
5.css 1 #content { 2 width: 100%; 3 } 4 5 @media screen { 6 img { 7 } 8 } 9 10 @media screen and (max-width: 480px) { 11 img { 12 width: 300px; 13 } 14 }
40
![Page 41: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/41.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
瀏覽器相容5.html at iOS6 6.html
41
![Page 42: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/42.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
解決問題解決方式
6.html
建議方式: fully implement
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <link href="6.css" rel="stylesheet" type="text/css" /> 7 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 8 <title>我在 Android World 2012 深圳:與會心得分享</title> 9 </head>
42
![Page 43: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/43.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
ViewPort 與 ContentViewPort
Content (Surface)
43
![Page 44: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/44.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
ViewPort 等於 Layout Viewport
44
![Page 45: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/45.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Scale = 2.0scale=1.0100% zoom480x320
(Content)
scale=2.0200% zoom960x640
(Content)
45
![Page 46: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/46.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Scale考慮 Scaling
手機設定 scale=1.0 (100% zoom)
➡ one CSS pixel 等於 one device pixel
➡ 12px / 1.2em
➡ ppi = pixel per inch
➡ 240 ppi
46
![Page 47: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/47.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
使用 ViewPort<head> <title>Example</title> <meta name="viewport" content="width=device-width, user-scalable=no" /></head>
<meta name="viewport" content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [yes | no] , target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] " />
Source: Android Dev Guide. Portions of this page are reproduced from work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.
47
![Page 48: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/48.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Media Query7.css 1 @media screen {
2 img { 3 } 4 #content { 5 width: 100%; 6 } 7 } 8 9 @media screen and (max-width: 480px) { 10 img { 11 width: 300px; 12 } 13 #content { 14 width: 100%; 15 } 16 }
48
![Page 49: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/49.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
自訂 Media Type
6 <link rel="stylesheet" 7 media="screen" 8 href="css/common.css" 9 type="text/css" /> 10 <link rel="stylesheet" 11 media="screen and (max-width: 480px)" 12 href="css/medium.css" 13 type="text/css" /> 14 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 15 <title>我在 Android World 2012 深圳:與會心得分享</title> 16 </head>
├── css│ ├── common.css│ └── medium.css└── index.html
49
![Page 50: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/50.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
多個 CSS├── css│ ├── common.css│ └── medium.css└── index.html
1 img { 2 width: 300px; 3 } 4 5 #content { 6 width: 100%; 7 }
1 img { 2 } 3 4 #content { 5 width: 100%; 6 }
├── css│ ├── common.css│ └── medium.css└── index.html
50
![Page 51: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/51.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
根據手機解析度定義Nexus S 4"@240dpi 480x800
Galaxy SII 4.3"@ 480x800
Galaxy Tab 2 7"@160dpi 600x1024
Galaxy Nexus 4.65"@320dpi 720x1280
HTC One X 4.7"@320dpi 720x1280
Galaxy SIII 4.8"@320dpi 720x1280
Galaxy Note 5.3"@320dpi 800x1280
Nexus 7 7"@213dpi 800x1280
51
![Page 52: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/52.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Media Type 範圍
~ 480481 ~ 720721 ~ 800801 ~
52
![Page 53: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/53.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
依手機實作 CSS 6 <link rel="stylesheet" 7 media="screen and (max-width: 480px)" 8 href="css/480.css" 9 type="text/css" /> 10 <link rel="stylesheet" 11 media="screen and (max-width: 720px) and (min-width: 481px)" 12 href="css/720.css" 13 type="text/css" /> 14 <link rel="stylesheet" 15 media="screen and (max-width: 800px) and (min-width: 721px)" 16 href="css/800.css" 17 type="text/css" /> 18 <link rel="stylesheet" 19 media="screen and (min-width: 801px)" 20 href="css/large.css" 21 type="text/css" />
53
![Page 54: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/54.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
目前文件結構
├── css│ ├── 480.css│ ├── 720.css│ ├── 800.css│ └── large.css└── index.html
54
![Page 55: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/55.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
實作 CSS480.css 800.css
img { width: 300px;}
#content { width: 100%;}
img { width: 720px;}
#content { width: 100%;}
720.css large.css
img { width: 480px;}
#content { width: 100%;}
img { width: 800px;}
#content { width: 100%;}
55
![Page 56: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/56.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
-webkit-device-pixel-ratioWebView 支援 “-webkit-device-pixel-ratio” CSS 樣式
➡ 0.75, 1.0, 1.5
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
Source: Android Dev Guide. Portions of this page are reproduced from work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.
56
![Page 57: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/57.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Webkit 有自已的個性
#header { background:url(medium-density-image.png);}
@media screen and (-webkit-device-pixel-ratio: 1.5) { /* CSS for high-density screens */ #header { background:url(high-density-image.png); }}
@media screen and (-webkit-device-pixel-ratio: 0.75) { /* CSS for low-density screens */ #header { background:url(low-density-image.png); }
Figure 5. A web page with CSS that's targetted to specific screen densities using the -webkit-device-pixel-ratio media feature. Notice that the hdpi device shows a different image that's applied in CSS.
Source: Android Dev Guide. Portions of this page are reproduced from work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.
57
![Page 58: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/58.jpg)
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
本教材由仕橙3G教室製作與維護
第一次學跨裝置 Font Size 就上手
58
![Page 59: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/59.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
property of the elementelement size
p { font-size: 1.2em } 表示比原本預設的大 20%
p {font-size: 14px} 不建議使用絕對值
59
![Page 60: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/60.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Galaxy SII
60
![Page 61: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/61.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
HTC One X
61
![Page 62: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/62.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
em vs rem
“elements will be 20% greater the element”
p { font-size: 1.2em} p { font-size: 1.2rem}
“elements will be 20% greater then root em”
62
![Page 63: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/63.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
font size 建議做法將 root element 的 default font size 改為 10px
➡ 原本是 16px
使用 rem 單位
➡ 相對於 root element
63
![Page 64: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/64.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
em vs rembody { font-size:62.5%; }h1 { font-size: 2.4em; } /* =24px */p { font-size: 1.4em; } /* =14px */li { font-size: 1.4em; } /* =14px ? */
body { font-size:62.5%; }h1 { font-size: 2.4em; } /* =24px */p { font-size: 1.4em; } /* =14px */li { font-size: 1.4em; } /* =14px */
html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
16px * 0.625 = 10px
64
![Page 65: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/65.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Base Property 觀念WebKit based browser 的問題
可使用 “Base” 觀念解決
➡ thierryk/base.css - https://gist.github.com/1396486
➡ “Styling for WebKit-based browsers”,
➡ http://www.css-101.org/articles/base-styles-sheet-for-webkit-based-browsers/index.php
65
![Page 66: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/66.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
修改 base font size將 default (base) font size 改為 8px
7 /* setting line-height and family while leaving default font-size using *rem * */ 8 9 html { 10 font: 62.5%/1.3 sans-serif; 11 } 12 13 /* zeroing out the default 8px margin */ 14 15 body { 16 font-size: 1.3rem; 17 margin: 0; 18 }
Root Element (HTML):16px * 0.625 = 10px10px / 1.3 = 7.69px = 8px
Body:8px * 1.3rem = 10px;
66
![Page 67: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/67.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
使用 base.css + 120% font sizeHTC One X (ratio = 50%)
Galaxy SII(ratio = 50%)
67
![Page 68: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/68.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
很重要但不能用切勿在 @media {} 裡使用 ‘rem’ 單位
@media {} 裡無法使用 ‘rem’ 單位 ?
➡ Bug 78295: Support for CSS rem unit in Media Queries,
➡ https://bugs.webkit.org/show_bug.cgi?id=78295
├── css│ ├── 480.css│ ├── 720.css│ ├── 800.css│ ├── base.css│ ├── common.css│ └── large.css└── index.html
1 p { 2 font-size: 1.2rem; 3 }
68
![Page 69: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/69.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
All in ‘12px’HTC One X
Android BrowserGalaxy SIIFirefox
Galaxy SIIAndroid Browser
Galaxy SIIFirefox
69
![Page 70: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/70.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
頁面放大
70
![Page 71: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/71.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
關掉 scaling 功能
24 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 25 <title>我在 Android World 2012 深圳:與會心得分享</title> 26 </head>
71
![Page 72: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/72.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
使用 “font-size: 4vw”vw: viewport’s width (%)
4x165mm/100 = 6.6mm = 0.66cm
viewport 的實體大小 ? 用尺量 !
72
![Page 73: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/73.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
字的大小是 0.66 公分目前發佈的 webkit based 瀏覽器不支援
73
![Page 74: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/74.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
現在能用 vw 嗎Bad news: 瀏覽器不支援
➡ Please just wait.
Good news:
➡ Implement vw/vh/vmin (viewport sizes) from CSS 3 Values and Units,
➡ https://bugs.webkit.org/show_bug.cgi?id=27160 and
➡ http://trac.webkit.org/changeset/109656
74
![Page 75: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/75.jpg)
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
本教材由仕橙3G教室製作與維護
第一次寫 Screen Detection 就上手
75
![Page 76: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/76.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Screen 大小偵測iMac Galaxy SII HTC One X
76
![Page 77: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/77.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
找喳時間又到了Firefox Android Browser Android Browser
77
![Page 78: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/78.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
使用 adapt.js├── css│ ├── 480.css│ ├── 720.css│ ├── 800.css│ └── large.css└── index.html
78
![Page 79: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/79.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
多屏 UI 的關鍵Screen Detection: 使用 JavaScript 取代 Media Query
了解 window/document 的 width/height
設好 ViewPort
寫好不同 Media Type 的 CSS
找⼀一個好的 browser engine (webkit) 工程師
➡ webkit engineer 應該和 UI designer 合作
➡ 工程師不會告訴你這是他的錯
79
![Page 80: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/80.jpg)
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
本教材由仕橙3G教室製作與維護
第一次學 JavaScript 就上手
80
![Page 81: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/81.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
www.codeyear.com
81
![Page 82: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/82.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
screenSize();<script>function screenSize() { var screenWidth, screenHeight, windowWidth, windowHeight;
screenWidth = screen.width; screenHeight = screen.height;
windowWidth = window.innerWidth; windowHeight = window.innerHeight;
alert("screenWidth: " + screenWidth + ", screenHeight: " + screenHeight); alert("windowWidth: " + windowWidth + ", windowHeight: " + windowHeight);}
screenSize();</script>
82
![Page 83: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/83.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
JavaScript 主要用途瀏覽器的程式語言
寫在 HTML 文件裡
主要目的是開發動態網頁
83
![Page 84: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/84.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
進階觀念Document ready 後才執行
Document 與 JavaScript 是並行載入 (concurrent)
84
![Page 85: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/85.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
使用 jQueryJavaScript 核心程式庫
JavaScript 的插件平臺
JavaScript 的外部程式庫
85
![Page 86: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/86.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
JavaScript Minify
“minify (compress) 後的版本”
jquery-1.8.3.min.js jquery-1.8.3.js
“未 minify,浪費載入時間”
86
![Page 87: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/87.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
偵測 Document Ready<script>function screenSize() { var screenWidth, screenHeight, windowWidth, windowHeight;
screenWidth = screen.width; screenHeight = screen.height;
windowWidth = window.innerWidth; windowHeight = window.innerHeight;
alert("screenWidth: " + screenWidth + ", screenHeight: " + screenHeight); alert("windowWidth: " + windowWidth + ", windowHeight: " + windowHeight);}
$(document).ready(screenSize);</script>
87
![Page 88: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/88.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
使用 $(document)
“selector. 從 DOM 裡找出指定的對象”
$
“DOM 裡面有一個 document 對象”
$(document)
88
![Page 89: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/89.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
載入後再執行
“接著呼叫 jQuery 的 ready() 函數”
$(document).ready()
“screenSize 是 ready 事件的 callback function”
$(document).ready(screenSize)
89
![Page 90: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/90.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
認識 DOMDOM
Document Object Model
document 是 DOM 裡的根 (root) 對象
每⼀一個標籤都是⼀一個對象,文件載入後掛進 DOM
學習 JavaScript 的重點是認識 DOM
JavaScript 的核心概念: Access DOM
不的標籤是不同的對象,並提供許多 API (函數)
90
![Page 91: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/91.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
認識 Selector<!doctype html><html><head><meta charset="utf-8"><title></title></head> <body><header></header><nav></nav><article> <section>summary</section> <div id=”notes”></div></article><aside></aside><footer></footer></body></html>
id=notes
var content = findElememtById(“notes”);
var content = $(“notes”);
91
![Page 92: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/92.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
二種選擇對象的方法
“呼叫 DOM 提供的函數來找出 notes”
var content = findElememtById(“notes”);
“使用 jQuery 選擇器來找出 notes”
var content = $(“notes”);
92
![Page 93: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/93.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Anonymous Function 63 <script> 64 function screenSize() { 65 var screenWidth, 66 screenHeight, 67 windowWidth, 68 windowHeight; 69 70 screenWidth = screen.width; 71 screenHeight = screen.height; 72 73 windowWidth = window.innerWidth; 74 windowHeight = window.innerHeight; 75 76 alert("screenWidth: " + screenWidth + ", screenHeight: " + screenHeight); 77 alert("windowWidth: " + windowWidth + ", windowHeight: " + windowHeight); 78 } 79 80 $(document).ready(function() { 81 alert("OK!"); 82 }); 83 </script>
93
![Page 94: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/94.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
使用於 Callback function 參數
“具名函數”
function screenSize() {}
“匿名函數,使用於 callback function 參數”
function() {}
function screenSize() {}
“不需要名字”
94
![Page 95: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/95.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
認識 Anonymous Function匿名函數
function constant
lambda function
發源於 1958 LISP 語言
多種語言採用
經常使用於 Callback function 參數
在 JavaScript 裡,anonymous function 有別於 Closure
95
![Page 96: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/96.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
學習 jQuery 63 <script> 64 function screenSize() { 65 var screenWidth, 66 screenHeight, 67 windowWidth, 68 windowHeight; 69 70 screenWidth = screen.width; 71 screenHeight = screen.height; 72 73 windowWidth = window.innerWidth; 74 windowHeight = window.innerHeight; 75 } 76 77 $(document).ready(function() { 78 screenSize(); 79 $("#content").css("display", "none"); 80 $("#content").fadeIn("slow"); 81 }); 82 </script>
96
![Page 97: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/97.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
查詢函數用法
1 .css( propertyName )2 .css( propertyName, value )3 .css( propertyName, function(index, value) )4 .css( map )
.css();
.fadeIn( [duration] [, callback] )
.fadeIn();
97
![Page 98: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/98.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
動態修改 CSS
$(“#content”).css(“display”, “none”);
#content { display: none;}
98
![Page 99: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/99.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
DOM SelectorgetElememtById()
jQuery
Sizzle
99
![Page 100: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/100.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
JavaScript 重要基礎Object (物件觀念)
Module Pattern (模組製作)
輸入事件處理 (Input Events)
➡ Drag & Drop
DOM (Document Object Model)
100
![Page 101: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/101.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Create Objects
var person = {
! name: "Jollen",
! job: "Software Developer",
!
! queryJob: function() {
! ! alert(this.job);
! }
};
person.queryJob();
101
![Page 102: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/102.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
JavaScript Constructor Patternfunction Person(name, job) {
! this.name = name;
! this.job = job;
! this.queryJob = function() {
! ! alert(this.job);
! };
}
// 將 Person() 視為 constructorvar person = new Person("Jollen", "Software Developer");
alert(person instanceof Person); // true
102
![Page 103: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/103.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Closure (封閉性)
“沒有封閉...”
var base;
function square( ) { base = base * base;}
function() {var base;
function square( ) { base = base * base;}}
(function() {var base;
function square( ) { base = base * base;}})
(function() {var base;
function square( ) { base = base * base;}}) ();
“完成封閉,成為一個封包”
103
![Page 104: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/104.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
匯入外部封包(function($) {var base;
function square( ) { base = base * base; $(“#content”).html(base);}}) (jQuery);
“匯入 jQuery 封包”
$ = jQuery
104
![Page 105: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/105.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
jQuery PluginsAdd new methods to jQuery module (object).
105
![Page 106: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/106.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
做⼀一個 jQuery Plugin
$.fn.cover = function () {...};
106
![Page 107: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/107.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
將功能插件化
(function($) {var base;
$.fn.square = function( ) { base = base * base; $(“#content”).html(base);}}) (jQuery);
“插件要打包, 一個插件裡有一個函數”
107
![Page 108: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/108.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
插件裡有多個函數(function($) {var base;
$.fn.square = function( ) { base = base * base; $(“#content”).html(base);}$.fn.minus = function( ) { base = base - 10; $(“#content”).html(base);}
}) (jQuery);
“插件包, 這個插件裡有2個函數”
108
![Page 109: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/109.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
插件裡有多個函數(function($) {var base = 5;
$.fn.square = function( ) { base = base * base; this.html(base);}$.fn.minus = function( ) { base = base - 10; this.html(base);}
}) (jQuery);
up objct
<div id=”content”></div><div id=”message”></div><script>$(“#content”).square();$(“#message”).minus();</script>
109
![Page 110: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/110.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
this 的 up object 是 content<div id=”content”></div><div id=”message”></div><script>$(“#content”).square();$(“#message”).minus();</script> content
message
(function($) {var base = 5;
$.fn.square = function( ) { base = base * base; this.html(base);}
}) (jQuery);
function() { this}
110
![Page 111: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/111.jpg)
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
本教材由仕橙3G教室製作與維護
第一次學 UI Framework 就上手
111
![Page 112: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/112.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
JavaScript UI FrameworkjQuery Mobile
jQuery Tools, http://flowplayer.org/tools/index.html
jQuery UI, http://jqueryui.com/home
Kendo UI, http://www.kendoui.com/
Ignite,
Prototype UI, http://www.prototype-ui.com/
MochaUI, http://mochaui.com/
UKI, http://ukijs.org/
112
![Page 113: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/113.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
非常多 Open Source 計畫iUI, http://code.google.com/p/iui/
Yahoo YUI, http://developer.yahoo.com/yui/
XUI, http://xuijs.com/
Alloy, http://alloy.liferay.com/
Jitsu, http://www.jitsu.org/jitsu/index.html
Qutensil, http://qutensil.com/
Dojo Mobile, http://http://dojotoolkit.org/
113
![Page 114: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/114.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
使用 jQuery Mobile
3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <link rel="stylesheet" href="css/base.css" type="text/css" /> 7 <link rel="stylesheet" href="css/common.css" type="text/css" /> 8 <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" type="text/css" /> ... 25 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 26 <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> 27 <script src="js/jquery.mobile-1.1.1.min.js" type="text/javascript"></script> 28 <title>我在 Android World 2012 深圳:與會心得分享</title> 29 </head>
114
![Page 115: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/115.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
jquery.ebook.js
1 (function() { 2 3 $.fn.cover = function() { 4 var ctx = this; 5 6 $(ctx).css("background", "#000000"); 7 $(ctx).css("color", "#ffffff"); 8 } 9 10 }) (jQuery);
115
![Page 116: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/116.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
javascriptcompressor.com
116
![Page 117: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/117.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
jquery.ebook.min.js
(function(){$.fn.cover=function(){var ctx=this;$(ctx).css("background","#000000");$(ctx).css("color","#ffffff")}})(jQuery);
117
![Page 118: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/118.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
直接修改不方便CSS 應定義在獨立的 .css 文件
使用 jQuery 的 .addClass() 來引用
118
![Page 119: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/119.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
jquery.ebook.css
1 .ebook_cover { 2 background: #000000; 3 color: #ffffff; 4 height: 30rem; 5 }
119
![Page 120: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/120.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
修改 index.html 8 <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" type="text/css" /> 9 <link rel="stylesheet" href="css/jquery.ebook.css" type="text/css" /> . . 26 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 27 <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> 28 <script src="js/jquery.mobile-1.1.1.min.js" type="text/javascript"></script> 29 <script src="js/jquery.ebook.js" type="text/javascript"></script> . . 35 <div id="cover"> 36 <p>我在 Android World 2012 深圳:與會心得分享</p> 37 </div> . 89 $(document).ready(function() { 90 screenSize(); 91 $("#content").css("display", "none"); 92 $("#content").fadeIn("slow"); 93 $("#cover").cover(); 94 }); 95 </script>
120
![Page 121: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/121.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
jquery.ebook.js
1 (function() { 2 3 $.fn.cover = function() { 4 var ctx = this; 5 6 ctx.addClass("ebook_cover"); 7 } 8 9 }) (jQuery);
121
![Page 122: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/122.jpg)
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
本教材由仕橙3G教室製作與維護
第一次學 jQuery Mobile 就上手
122
![Page 123: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/123.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
jQuery UI FrameworkjQTouch
jQuery Mobile
➡ http://jquerymobile.com/
123
![Page 124: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/124.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
“data-” attribute
The jQuery Mobile framework uses HTML5 data- attributes to allow for markup-based initialization and configuration of widgets. These attributes are completely optional; calling plugins manually and passing options directly is also supported.
124
![Page 125: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/125.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
data-role=”page”
<body data-role="page"> ...content goes here...</body></html>
使用 “data-” attribute
125
![Page 126: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/126.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
jQuery Mobile 頁面結構<body>
<div data-role="page">
<div data-role="header"> <h1>Page Title</h1> </div><!-- /header -->
<div data-role="content"> <p>Page content goes here.</p> </div><!-- /content -->
<div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --></div><!-- /page -->
</body></html>
126
![Page 127: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/127.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Page TransitionsjQuery Mobile 支援 CSS3 方式的 Page Transition
可套用在 page link 或是 form (表單)
描述方式:
<a href="index.html" data-transition="pop">Home</a>
127
![Page 128: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/128.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
使用 Dialogs<div data-role="page">
<div data-role="header"> <h1>Page Title</h1> </div><!-- /header -->
<div data-role="content"> <p>Page content goes here.</p> <a href="page-2.html" data-rel="dialog">Open dialog</a> </div><!-- /content -->
<div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --></div><!-- /page -->
128
![Page 129: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/129.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
使用 Transition<div data-role="page">
<div data-role="header"> <h1>Page Title</h1> </div><!-- /header -->
<div data-role="content"> <p>Page content goes here.</p> <a href="page-2.html"
data-rel="dialog" data-transition="slidedown">Open dialog</a>
</div><!-- /content -->
<div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --></div><!-- /page -->
129
![Page 130: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/130.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
jQuery 佈景jQuery Mobile 支援 CSS3 方式的自定佈景 (theme)
使用 ThemeRoller 工具
130
![Page 131: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/131.jpg)
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
本教材由仕橙3G教室製作與維護
第一次學 PhoneGap 就上手
131
![Page 132: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/132.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
將網站打包成 App
package com.moko365.examples.phonegap;
import android.app.Activity;import android.os.Bundle;
import com.phonegap.*;import org.apache.cordova.*;
public class HelloPhoneGapActivity extends ActivityDroidGap { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); super.loadUrl("file:///android_asset/www/index.html"); }}
132
![Page 133: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/133.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
應用程式的 UI: index.html
133
![Page 134: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/134.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
HTML5 App: 從這裡開始<!DOCTYPE HTML><html><head>
<title>PhoneGap</title><script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head><body>
<h1>Hello World</h1></body></html>
134
![Page 135: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/135.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
使用 JavaScript 呼叫 Device APIhttp://docs.phonegap.com
135
![Page 136: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/136.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Accelerometer APInavigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);
function onSuccess(acceleration) { alert('Acceleration X: ' + acceleration.x + '\n' + 'Acceleration Y: ' + acceleration.y + '\n' + 'Acceleration Z: ' + acceleration.z + '\n' + 'Timestamp: ' + acceleration.timestamp + '\n');};
function onError() { alert('onError!');};
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
136
![Page 137: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/137.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
acceleration.html<!DOCTYPE html><html> <head> <title>Acceleration Example</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script type="text/javascript" charset="utf-8"> document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready // function onDeviceReady() { navigator.accelerometer.getCurrentAcceleration(onSuccess, onError); } function onSuccess(acceleration) { alert('Acceleration X: ' + acceleration.x + '\n' + 'Acceleration Y: ' + acceleration.y + '\n' + 'Acceleration Z: ' + acceleration.z + '\n' + 'Timestamp: ' + acceleration.timestamp + '\n'); } function onError() { alert('onError!'); } </script> </head> <body> <h1>Example</h1> <p>getCurrentAcceleration</p> </body></html>
137
![Page 138: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/138.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Native Web App 觀念
Source: Android Dev Guide. Portions of this page are reproduced from work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.
Figure 1. You can make your web content available to users in two ways: in a traditional web browser and in an Android application, by including a WebView in the layout.
138
![Page 139: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/139.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
CanvasHTML5 新增的繪圖標籤
不同瀏覽器的支援程度不同
139
![Page 140: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/140.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
使用 <Canvas><canvas id="cover"></canvas>
<script>var canvas = document.getElementById("cover");
var ctx = canvas.getContext("2d");!canvas.width = 480;canvas.height = 640;
ctx.fillStyle = "black";ctx.beginPath();ctx.arc(100, 100, 100, 0, Math.PI * 2, true);ctx.fill();
ctx.fillStyle = "white";ctx.beginPath();ctx.arc(100, 100, 50, 0, Math.PI * 2, true);ctx.fill();</script>
推薦網站:http://www.javascriptkit.com/domref/
140
![Page 141: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/141.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Audio
<audio controls id="player"><source src="test.ogg"/></audio>
<script>var audio = document.getElementById("player");
document.onkeydown = function(e) {! if (e.keyCode == 83) { // 'P': Start! ! audio.pause();! } else if (e.keyCode == 80) {! ! audio.play(); // 'P': Play! }}</script>
141
![Page 142: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/142.jpg)
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
本教材由仕橙3G教室製作與維護
第一次學 Event 處理就上手
142
![Page 143: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/143.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
處理 Click 事件
document.getElementById("content").addEventListener("click", function() {}, false);
143
![Page 144: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/144.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
‘touchmove’ 事件
Touch X: <input id="touchx"><br/>Touch Y: <input id="touchy">
<script>var touchx = document.getElementById("touchx"),! touchy = document.getElementById("touchy");!document.addEventListener("touchmove", function(e) {! var touch = e.touches[0];! touchx.value = touch.clientX;! touchy.value = touch.clientY;! e.preventDefault();}, false);</script>
144
![Page 145: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/145.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
Touch 事件
touchstart
touchmove
touchend
145
![Page 146: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/146.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
結合繪圖與事件處理<canvas id="canvas" width="400" height="300"></canvas>
<script>var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d");
canvas.addEventListener("touchmove", function(e) { hitTest(e.targetTouches[0]); e.preventDefault();}, false);canvas.addEventListener("mousemove", hitTest, false);
function hitTest(e) { var rect = canvas.getBoundingClientRect(), x = e.clientX - rect.left, y = e.clientY - rect.top, inPath = ctx.isPointInPath(x, y); ctx.fillStyle = inPath ? "orange" : "teal"; ctx.fill();}</script>
146
![Page 147: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/147.jpg)
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
多屏 UI 的關鍵: 結論Screen Detection: 使用 JavaScript 取代 Media Query
了解 window/document 的 width/height
設好 ViewPort
寫好不同 Media Type 的 CSS
用對 UI Framework (多屏 UI Framework 有待開發)
147
![Page 148: 課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)](https://reader034.fdocuments.net/reader034/viewer/2022052215/554f3f74b4c90572088b5202/html5/thumbnails/148.jpg)
更多資訊請上 Go8Panel.com148