jQuery Mobile 笔记（1）- jQuery Mobile页面结构
jQuery Mobile 的“頁面”結(jié)構(gòu)不同于傳統(tǒng)的html頁面，這樣做是為了優(yōu)化single page application的用戶體驗。
利用jQuery Mobile可以使web應(yīng)用達到和本地應(yīng)用同樣的用戶體驗，這是傳統(tǒng)web應(yīng)用無法實現(xiàn)的。
同時如果由于跨域名或者其他原因禁用了Ajax的話，jquery mobile也能平滑的降級為傳統(tǒng)的web應(yīng)用，it just works。
jQuery mobile頁面結(jié)構(gòu)
jQuery mobile站點的頁面必須以HTML5的doctype開頭，即 “<!DOCTYPE html>”（不支持HTML5的瀏覽器會忽略這個標簽）。
然后引入jQuery，jQuery mobile的javascript代碼文件以及jquery mobile的css文件。
jQuery工作組建議使用jquery的CDN來獲得最佳性能（我訪問jquery的網(wǎng)站速度有點慢，不知道這個CDN速度有多快，不過如果網(wǎng)站面向全世界用戶，使用CDN應(yīng)該稍稍提升性能）。
所以，jquery mobile的頁面應(yīng)該都是這樣開始的：
<!DOCTYPE?html>??<html>??????
<head>??????
<title>Page?Title</title>???????????
<meta?name="viewport"?content="width=device-width,?initial-scale=1">???????
<link?rel="stylesheet"?href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"?/>?????
<script?src="http://code.jquery.com/jquery-1.6.4.min.js"></script>?????
<script?src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js">
</script>?
</head>???
<body>??...content?goes?here...?</body>?
</html>?
Viewport meta 標簽
上面的代碼里有一個viewport?標簽，這個標簽是用來指定瀏覽器對頁面顯示寬度和縮放等級。如果不設(shè)置這個標簽，在很多移動設(shè)備瀏覽器中，頁面可能會變得很寬，頁面元素也會變得很小。給頁面加上下面這個標簽，頁面寬度就會顯示為屏幕寬度。
<meta name="viewport" content="width=device-width, initial-scale=1">?加上這個標簽后，移動設(shè)備的用戶能獲得最佳的用戶體驗，同時也不會影響移動設(shè)備的縮放功能。深入body
jQuery mobile展現(xiàn)頁面的方式與傳統(tǒng)HTML不同，她使用了一些列屬性來表示當(dāng)前的元素代表什么或者如何處理當(dāng)前的元素，例如jquery mobile的page可以用線面的HTML代碼表示：?
<div data-role="page"> ... </div>?data-role="page"就表達了當(dāng)前這個div就是一個頁面的語義（與knockout js有近親關(guān)系？）
更多data-attribute請參考這里：http://jquerymobile.com/demos/1.0.1/docs/api/data-attributes.html?
?
在一個“page”里面，還可以添加“header”，“content”，“footer”等等，頁面代碼可能是下面這個樣子：?
<div?data-role="page">??????<div?data-role="header">...</div>??????
<div?data-role="content">...</div>??????
<div?data-role="footer">...</div> </div>??
這樣標記頁面的好處是更加方便的使用Ajax來load頁面，語義上來說，可以通過Ajax把一個完整的jquery mobile “page”在client和server端互傳，這樣client端和server的程序邏輯能更方便地處理這種語義上的完整頁面，同時這個”page“在瀏覽器看來只是一個HTML片段，所以不會引發(fā)整個頁面的刷新，從而給用戶以更好的rich client app體驗。
單頁面結(jié)構(gòu)
?一個完整的單頁面（single page）代碼：
<!DOCTYPE?html>??<html>?
????<head>?
????<title>Page?Title</title>?
????
????<meta?name="viewport"?content="width=device-width,?initial-scale=1">?
????<link?rel="stylesheet"?href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"?/>
????<script?src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
????<script?src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>?
<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>
多頁面結(jié)構(gòu)
多頁面（multi-page）代碼：
一個HTML頁面可以包含多個jquery mobile ”page“，但是在頁面加載時，只會顯示HTML代碼中第一個jquery mobile ”page“。不過只要在顯示出來的頁面上用link指向jquery mobile ”page“ 標簽的id，那么在點擊這些link的時候jquery mobile會load并顯示這些”page“，并且可以指定load頁面時的動畫效果。
下面這段代碼中，id=”foo“?的頁面會在頁面加載的時候顯示出來，其他”page“這時候看不見，但是foo ”page“包含了一個link（ <a?href="#bar">bar</a>?），這個link的href指向隱藏”page“的id，點擊這個link的時候jquery mobile就會加載并以指定的動畫效果顯示出bar ”page“（看起來不錯，在很多瀏覽器上還是有點卡）。
<body>?<!--?Start?of?first?page?-->
<div?data-role="page"?id="foo">
????<div?data-role="header">
????????<h1>Foo</h1>
????</div><!--?/header?-->
????<div?data-role="content">????
????????<p>I'm?first?in?the?source?order?so?I'm?shown?as?the?page.</p>????????
????????<p>View?internal?page?called?<a?href="#bar">bar</a></p>????
????</div><!--?/content?-->
????<div?data-role="footer">
????????<h4>Page?Footer</h4>
????</div><!--?/footer?-->
</div><!--?/page?-->
<!--?Start?of?second?page?-->
<div?data-role="page"?id="bar">
????<div?data-role="header">
????????<h1>Bar</h1>
????</div><!--?/header?-->
????<div?data-role="content">????
????????<p>I'm?the?second?in?the?source?order?so?I'm?hidden?when?the?page?loads.?I'm?just?shown?if?a?link?that?references?my?ID?is?beeing?clicked.</p>????????
????????<p><a?href="#foo">Back?to?foo</a></p>????
????</div><!--?/content?-->
????<div?data-role="footer">
????????<h4>Page?Footer</h4>
????</div><!--?/footer?-->
</div><!--?/page?-->
</body>
?
?ps：jQuery mobile 的這種語法可能會影響原始的HTML的書簽的語法。
以上的jQuery Mobile ”page“語法并非強制，web開發(fā)者仍然可以使用傳統(tǒng)的HTML開發(fā)方式
?
原文：http://jquerymobile.com/demos/1.0.1/docs/pages/page-anatomy.html?
?
轉(zhuǎn)載于:https://www.cnblogs.com/dlbrant/archive/2012/04/01/2429196.html
總結(jié)
以上是生活随笔為你收集整理的jQuery Mobile 笔记（1）- jQuery Mobile页面结构的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： UVa 111 - History Gr
- 下一篇： DAO层使用泛型的两种方式