Tad 教材網 - 線上書籍

:::

11-1 上課範例：blocks/contact_qrcode.php next

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

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1012/11.pdf)

### 一、 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。
 ```

<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>
```

5. 通過設置viewport屬性為，會使寬度會被設定為設備的屏幕寬度。
6. 將鏈結<a>加以美化，只要將<ul> 指定data-role的屬性為listview就可以了。
7. data-inset='true' 指定若此listview現在文中間，會自動幫你在上下加上圓弧邊。
8. 用 data-role='list-divider'可做成列表的標題。
9. 在每個<li>的一開始加上一個 <img> , JQM就會自動把它放在最左邊當做縮圖
10. 在<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/>
 
</body></html>

:::

搜尋

進階搜尋

QR Code 區塊

https%3A%2F%2Ftad0616.cp22.secserverpros.com%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D785

快速登入

書籍目錄

展開 | 闔起

線上使用者

91人線上 (45人在瀏覽線上書籍)

會員: 0

訪客: 91

更多…

MarkDown

搜尋

QR Code 區塊

快速登入

書籍目錄

線上使用者