jQuery Mobile 笔记（1）- jQuery Mobile页面结构
jQuery Mobile 的“頁面”結構不同于傳統的html頁面，這樣做是為了優化single page application的用戶體驗。
利用jQuery Mobile可以使web應用達到和本地應用同樣的用戶體驗，這是傳統web應用無法實現的。
同時如果由于跨域名或者其他原因禁用了Ajax的話，jquery mobile也能平滑的降級為傳統的web應用，it just works。
jQuery mobile頁面結構
jQuery mobile站點的頁面必須以HTML5的doctype開頭，即 “<!DOCTYPE html>”（不支持HTML5的瀏覽器會忽略這個標簽）。
然后引入jQuery，jQuery mobile的javascript代碼文件以及jquery mobile的css文件。
jQuery工作組建議使用jquery的CDN來獲得最佳性能（我訪問jquery的網站速度有點慢，不知道這個CDN速度有多快，不過如果網站面向全世界用戶，使用CDN應該稍稍提升性能）。
所以，jquery mobile的頁面應該都是這樣開始的：
<!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?標簽，這個標簽是用來指定瀏覽器對頁面顯示寬度和縮放等級。如果不設置這個標簽，在很多移動設備瀏覽器中，頁面可能會變得很寬，頁面元素也會變得很小。給頁面加上下面這個標簽，頁面寬度就會顯示為屏幕寬度。
<meta name="viewport" content="width=device-width, initial-scale=1">?加上這個標簽后，移動設備的用戶能獲得最佳的用戶體驗，同時也不會影響移動設備的縮放功能。深入body
jQuery mobile展現頁面的方式與傳統HTML不同，她使用了一些列屬性來表示當前的元素代表什么或者如何處理當前的元素，例如jquery mobile的page可以用線面的HTML代碼表示：?
<div data-role="page"> ... </div>?data-role="page"就表達了當前這個div就是一個頁面的語義（與knockout js有近親關系？）
更多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片段，所以不會引發整個頁面的刷新，從而給用戶以更好的rich client app體驗。
單頁面結構
?一個完整的單頁面（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>
多頁面結構
多頁面（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開發者仍然可以使用傳統的HTML開發方式
?
原文：http://jquerymobile.com/demos/1.0.1/docs/pages/page-anatomy.html?
?
轉載于:https://www.cnblogs.com/dlbrant/archive/2012/04/01/2429196.html
總結
以上是生活随笔為你收集整理的jQuery Mobile 笔记（1）- jQuery Mobile页面结构的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： UVa 111 - History Gr
- 下一篇： DAO层使用泛型的两种方式