jQuery Mobile 的基本介紹
最近這陣子又繞回來寫.NET了，這次要寫的是手機網站，所以就趕了一下風潮，學著用jQuery Mobile一下。結果寫起來跟預期的還差蠻多的… 。jQuery Mobile 基本上是以HTML5 及 CSS 3.0為基礎幫你自動化你的頁面。以最基本的網頁架構來說：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/jquery.mobile.structure-1.0.1.min.css" />
<script src="/scripts/jquery-1.7.1.min.js"></script>
<script src="/scripts/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<div data-cache="never" data-role="page" id="home" data-url="@Request.Url.ToString()">
<div data-role="header">
<a data-theme="a" data-iconpos="notext" data-icon="arrow-l" data-rel="back">返回</a>
<h1>My Title</h1>
<a data-theme="a" data-iconpos="notext" data-role="button" data-icon="home" href="@Url.Action("Index", "Home")">回主頁</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
大概會是這樣，每一頁是以data-role="page"來定義，包含了header、content、以及footer；header通常都是網站標題、footer則是版權宣告、content當然就是網頁內容啦，當然你也可以在header和footer加上一些常用連結和功能（navi，例如：回上頁、回主頁等等。（回上頁jQuery有幫你做了一個，可以直接利用data-rel="back"，他就會有回上頁的動作）
jQuery Mobile利用了data-role來定義每個區塊的功能，同時進行CSS的套版。例如：我在header裡，除了網頁標題以外還加了左、右各一個連結，為了讓他呈現按鈕的樣子，我加上了data-role ="button"。從jQuery Mobile官網下載下來的檔案中，會包含已經設定好的css檔「jquery.mobile-1.0.1.min.css」，以及單純結構的css檔「jquery.mobile.structure-1.0.1.min.css」，我們可以利用jquery.mobile.structure-1.0.1.min.css，再利用ThemeRoller來自訂自己想要的css（網站會把不同的樣式用abcd的方式編訂流水號）；在物件上加上data-theme，他就會套上相對應設定的樣式；不過要注意引用自訂的樣式要宣告在jquery.mobile.structure之前。
另外，jQuery Mobile除了自動格式化樣式以外，還有許多設定可以自行修改，不過一樣要注意引入順序要在jquery.mobile之前，不然會被原有的設定覆蓋。
<script src="/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/scripts/website.js" type="text/javascript"></script>
<script src="/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
預設jQuery Mobile會以Ajax的方式載入所有頁面，所以如果你程式裡有自行再轉導頁，也許會發現網址不會變更，這時候可以在data-role="page"中宣告data-url="xxxxx"以表示該頁的網址；如果不想讓jQuery Mobile快取頁面，可以增加data-cache="never"（這個不是一般瀏覽器的快取哦，是jQuery Mobile為了節省效能自己做的快取）。如果你不需要他用Ajax的方式載入，也可以利用$.mobile.ajaxEnabled = false; 把他關掉；或著變更他Ajax載入時的動畫效果，利用$.mobile.defaultPageTransition = "none";來調整。
這邊要特別注意的是，當你是設定Ajax方式載入時，在網頁中設定的Script，執行方式要特別注意。舉例來說，如果我在第一頁自己綁了一個$(window).bind("scroll", function(){});的事件，你會發現後續載入的網頁都會不停的執行這段Script。所以每一頁儘量避免用同一個物件id，避免發現重覆綁定事件之類的狀況。（所以尤其是在綁定button動作的時候更要特別小心…）
更多設定就請參考jQuery Mobile的範例網站啦！
jQuery Mobile: Demos and Documentation