[1012]PHP進階開發及TadTools工具應用

11. Jquery Mobile

一、 jQuery Mobile（JQM）的特性

  1. JQM幾乎支援所有的行動裝置： http://jquerymobile.com/gbs/
  2. JQM以部分更新取代整頁更新，省掉CSS、JavaScript剖析的時間。也會用Cache加速瀏覽。
  3. 完整API：http://jquerymobile.com/demos/1.2.0/
  4. 中文版：http://www.jqmapi.com/

二、 jQuery Mobile的頁面結構

  1. 宣告 HTML5 documnt，引入JQM的css及js檔
  2. 一個JQM的網頁主要以page為單位，每個page可分成header、content與footer三個區域。
  3. 在一個HTML檔案中可以放多個pages，不過每次只會顯示一個page。
    4. <!DOCTYPE html>
<html>
 <head>
 <title>通訊錄</title>
 <meta name='viewport' content='width=device-width, initial-scale=1'>
 <link rel='stylesheet' href='".XOOPS_URL."/modules/tadtools/jquery.mobile/jquery.mobile.css' />
 <script src='".XOOPS_URL."/modules/tadtools/jquery/jquery.js'></script>
 <script src='".XOOPS_URL."/modules/tadtools/jquery.mobile/jquery.mobile.js'></script>
</head>
<body>
<div data-role='page'>
  <div data-role='header'>
    <a data-icon='arrow-l' data-rel='back'>回上頁</a>
    <h1>通訊錄</h1>
    <a href='#' data-icon='home'>回首頁</a>
    <div data-role='navbar' >
      <ul>
        <li><a href='#' data-icon='star' data-iconpos='top' data-theme='b'>基本資料</a></li>
        <li><a href='#' data-icon='search' data-iconpos='top' data-theme='b'>相關相片</a></li>
        <li><a href='#' data-icon='check' data-iconpos='top' data-theme='b'>相關檔案</a></li>
      </ul>
    </div>
  </div>
  <div data-role='content'>
    <ul data-role='listview' data-inset='false'>
      <li data-role='list-divider'>所有通訊錄列表</li>
      <li><a href='#page2'><img src='images/pic.png' /><h3>姓名</h3><p>文字描述</p></a>
      <span class='ui-li-count'>2</span></li>
    </ul>
  </div>
  <div data-role='footer'>共 N 筆資料</div>
</div>
<div data-role='page' id='page2'><div data-role='content'>第二頁</div></div>
</body>
</html>
  4. 通過設置viewport屬性為，會使寬度會被設定為設備的屏幕寬度。
  5. 將鏈結<a>加以美化，只要將<ul> 指定data-role的屬性為listview就可以了。
  6. data-inset='true' 指定若此listview現在文中間，會自動幫你在上下加上圓弧邊。
  7. 用 data-role='list-divider'可做成列表的標題。
  8. 在每個<li>的一開始加上一個 <img> , JQM就會自動把它放在最左邊當做縮圖
  9. 在<li>裡面加上一個 <span class='ui-li-count'>，JQM會把內容包在圓框中並放在最右邊

三、 jQuery Mobile的瀏覽列

  1. 瀏覽列最多一行可以有五個
  2. 圖示列表：http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-icons.html

四、 jQuery Mobile的表單

  1. JQM會自動將很多表單的元素轉換為觸控較好操作的形式，並多了如Slider、Flip等表單元件。
  2. 表單形式：http://jquerymobile.com/demos/1.2.0/docs/forms/forms-all.html
  3. 利用<div data-role='fieldcontain'>表單</div>會針對不同的螢幕寬度做不同的布局。

五、 模擬手機瀏覽器

  1. Mobilizer：http://www.springbox.com/mobilizer/ 需搭配Adobe AIR。
  2. Opera Mobile Emulator：http://www.opera.com/developer/tools/mobile/