11.
Jquery Mobile
一、 jQuery Mobile（JQM）的特性
- JQM幾乎支援所有的行動裝置： http://jquerymobile.com/gbs/
- JQM以部分更新取代整頁更新，省掉CSS、JavaScript剖析的時間。也會用Cache加速瀏覽。
- 完整API：http://jquerymobile.com/demos/1.2.0/
- 中文版：http://www.jqmapi.com/
二、 jQuery Mobile的頁面結構
- 宣告 HTML5 documnt，引入JQM的css及js檔
- 一個JQM的網頁主要以page為單位，每個page可分成header、content與footer三個區域。
- 在一個HTML檔案中可以放多個pages，不過每次只會顯示一個page。
<!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>
- 通過設置viewport屬性為，會使寬度會被設定為設備的屏幕寬度。
- 將鏈結<a>加以美化，只要將<ul> 指定data-role的屬性為listview就可以了。
- data-inset='true' 指定若此listview現在文中間，會自動幫你在上下加上圓弧邊。
- 用 data-role='list-divider'可做成列表的標題。
- 在每個<li>的一開始加上一個 <img> , JQM就會自動把它放在最左邊當做縮圖
- 在<li>裡面加上一個 <span class='ui-li-count'>，JQM會把內容包在圓框中並放在最右邊
三、 jQuery Mobile的瀏覽列
- 瀏覽列最多一行可以有五個
- 圖示列表：http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-icons.html
四、 jQuery Mobile的表單
- JQM會自動將很多表單的元素轉換為觸控較好操作的形式，並多了如Slider、Flip等表單元件。
- 表單形式：http://jquerymobile.com/demos/1.2.0/docs/forms/forms-all.html
- 利用<div data-role='fieldcontain'>表單</div>會針對不同的螢幕寬度做不同的布局。
五、 模擬手機瀏覽器
- Mobilizer：http://www.springbox.com/mobilizer/ 需搭配Adobe AIR。
- Opera Mobile Emulator：http://www.opera.com/developer/tools/mobile/
10-6 上課範例：index.php
