jQuery Mobile

jquerymobile.com

頁面

用 html5 的 doctype

<!-- 先 link jQuery Mobile 的樣式進來 -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
 
<!-- jQuery 主程式 -->
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
 
<!-- 自己自訂的 jQuery Mobile 設定檔 -->
<script src="scripts/jm-conf.js"></script>
 
<!-- jQuery Mobile 主程式 -->
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
 
<!-- 自訂樣式 -->
<link rel="stylesheet" href="styles/style.css">
  • body 裡每個「頁面」的母元素(通常是 div)都要加上 data-role="page" 屬性,讓 jM 識別其為一頁。
  • 一個 html 檔裡可以放好幾頁,分別命一個 id 以便辨識。連結一樣用 #id,jM 會處理其他的事情。
    • 但也因此目前 jM 不支援 連結到同頁面中某個部分的功能,一律要做跨頁。
    • 多頁的情形下,*[data-role="page"] 中的 data-title 屬性值,會被轉為 title 元素內容。
    • 如果要從 A 檔連到 B 檔,且 B 檔包含多頁面,則 A 檔連結要設 rel="external"data-ajax="false",要不然整個站的 ajax 在設定裡關掉也可以。因為 jM 的網址結構,讓 ajax 沒關掉的話會出問題。(試試看,然後看網址就知道)
  • *[data-role="page"] 裡才是要顯示的畫面部分,其他一律不理。
  • 頁面裡通常會有頁首 *[data-role="head"]、內容 *[data-role="content"]、頁尾 *[data-role="footer"] 三個部分。
  • a[data-rel="back"] 會模擬「上一頁」的功能
  • 預設轉場功能是 slide-in,如果需要改可以 a[data-transition="pop"],或者到設定檔去改預設值
  • a[data-rel="dialog"] 可以將連結目標開為對話方塊,也能搭配 data-transition。關閉對話方塊的連結就是 a[data-rel="back"],不過對話方塊頁不會算進瀏覽器的 history 裡。
Creative Commons License
本站文字除特別聲明者外,係採創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權,利用前請見說明