線上書籍

Home

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

一、 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/