jQuery Mobile

1.架構

<html>
<head>
  <title>TITLE</title>
  <link href="jquery.mobile-1.4.2.min.css" rel="stylesheet"></link>
  <script src="jquery-1.8.2.min.js"></script>
  <script src="jquery.mobile-1.4.2.min.js"></script>
  <script src="https://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
</head>
<body>
<div data-role="page">
  <div class="header" data-role="header" data-id="persistent" data-position="fixed">
  </div>
</div>
</body>
</html>

a.<div data-role="page"></div>
每頁都必須有此tag，每頁不同的內容放在此tag內，此tag上方的內容只要首頁有即可，亦即jQuery Mobile在讀取首頁外的頁面時只會擷取那頁的<div data-role="page"></div> 內的內容，因此，若有js或css是某頁才需要用到的話，就要寫在 <div data-role="page"></div>裡面，而不是寫在<head></head>裡。

b. <div class="header" data-id="persistent" data-position="fixed" data-role="header"></div>
這是固定header的方法，在需要固定header的頁面都要包含此div。


2.Page transitions:
換頁時像APP那樣有頁面過渡的效果就要用這個屬性，<a href="2nd-page.asp" data-transition="slide">second page</a>，更多換頁效果。

若是在js裡使用，則用jQuery Mobile API:
<script>
//Adding the changeHash: false to avoid an issue with the iframe
$.mobile.changePage( "../resources/us.html", { transition: "slideup", changeHash: false });
</script>


3.Radion Button

<fieldset data-role="controlgroup" data-type="horizontal" >
  <legend>求職性質</legend>
  <input type="radio" name="tt" id="tt2" value="NM" checked="checked" /><label for="tt2">全職</label>
  <input type="radio" name="tt" id="tt3" value="PT" /><label for="tt3">兼職</label>
  <input type="radio" name="tt" id="tt4" value="ST" /><label for="tt4">工讀</label>
</fieldset>