本節書摘來異步社群《jquery mobile快速入門》一書中的第2章，第2.1節，作者：【美】brad broulik，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
jquery mobile快速入門
一個jquery mobile頁面模闆如程式清單2-1所示。在往下講解之前，我們先來運作一下這個模闆。複制html模闆（ch2/template.html），然後粘貼到你的桌上型電腦中，并通過你最喜歡的浏覽器中打開它。現在，你運作的就是一個jquery mobile app，而且無論使用的是什麼浏覽器，它看起來應該與圖2-1所示相同。該模闆符合html5文法标準，并且包含了jquery mobile的特定屬性和asset檔案（css、js）。在程式清單2-1中，每一個特定的jquery mobile asset和屬性都突出顯示，并進行了解釋。
1．對jquery mobile來說，這是一個推薦的視圖（viewport）配置。device-width值表示，我們希望讓内容擴充到螢幕的整個寬度。initial-scale設定了用來檢視web頁面的初始縮放百分比或縮放因數。值為1，則顯示一個未縮放的文檔。作為一名jquery mobile開發人員，你可以根據應用程式的需要自定義視圖的設定。例如，如果你希望禁用縮放，則可以添加user-scalable=no。然而，如果禁用了縮放，則會破壞應用程式的可通路性，是以要謹慎使用。
2．jquery mobile的css會為所有的a級和b級浏覽器應用風格（stylistic）的優化。你可以根據需要自定義或添加自己的css。
3．jquery庫是jquery mobile的一個核心依賴，如果你的app需要更多動态行為，則強烈建議在你的移動頁面中使用jquery的核心api。
4．如果你需要改寫jquery mobile的預設配置，則可以應用你的自定義設定。有關自定義jquery mobile預設配置的細節，請參考第8章。
5．jquery mobile javascript庫必須在jquery和任何可能存在的自定義腳本之後聲明。jquery mobile庫是增強整個移動體驗的核心。
6．data-role=“page”為一個jquery mobile頁面定義了頁面容器。隻有在建構多頁面設計時，才會用到該元素（見程式清單2-3）。
7．data-role=“header”是頁眉（header）或标題欄，如圖2-1所示。該屬性是可選的。
8．data-role=“content”是内容主體的包裝容器（wrapping container）。該屬性是可選的。
9．data-role=“footer”包含頁腳欄（見圖2-1）。該屬性是可選的。
重要：
css和javascript檔案的順序必須與程式清單2-1中列出的順序一緻。這種排序是必要的，它可以正确地初始化這些檔案，然後再讓jquery mobile來引用。此外，建議從内容分發網絡（content delivery network，cdn）下載下傳這些檔案。尤其是，你可以從jquery mobile cdn1下載下傳這些檔案。這些從cdn中下載下傳的檔案都是經過高度優化的，可以為使用者提供更好的響應式體驗。它們是一些緩存的壓縮檔案，體積很小，是以可以并行載入。
提示：
為了将頁腳定位到螢幕的最底部，可以為頁腳元素添加data-position=“fixed”。預設的頁腳位置是在内容之後，并不是螢幕的底部。例如，如果你的内容隻占據了一半的螢幕高度，則頁腳會出現在螢幕中間。
jquery mobile是如何為優化的移動體驗增強标記的呢？我們來看圖2-2。
1．首先，jquery mobile會載入語義html标記（見程式清單2-1）。
2．其次，jquery mobile會疊代由它們的data-role屬性定義的每一個頁面元件。由于jquery mobile疊代每一個頁面元件，是以會為每一個應用優化過的移動css3元件添加标記。jquery mobile最終會将标記添加到頁面中，進而讓頁面能夠在所有平台上普遍呈現。
3．最後，在完成頁面的标記添加之後，jquery mobile會顯示優化過的頁面。要檢視由移動浏覽器呈現的添加源檔案，請參考程式清單2-2。
1．base标簽（tag）的@href為一個頁面中的所有連結指定了一個預設的位址或者預設的目标。例如，當載入特定頁面的資源（assets）時（比如圖檔、css、js等）jquery mobile會用到@href。
2．body标簽包含了header、content和footer元件的增強樣式。預設情況下，所有的元件都是使用預設的主題和特定的移動css增強來設計（styled）的。作為一個額外的好處，所有的元件現在都證明了可通路性，而這要歸功于wai-aria角色和級别。我們可以免費獲得這些增強。
現在你應該感覺到，可以很容易地設計一個基本的jquery mobile頁面了。我們前面已經介紹了核心的頁面元件（page、header、content、footer），并看到了一個增強的jquery mobile頁面所産生的文檔對象模型（document object model, dom）。接下來，我們開始講解jquery mobile的多頁面模闆。