:::

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

:::

搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D26%26tbdsn%3D785

書籍目錄

展開 | 闔起

線上使用者

26人線上 (11人在瀏覽線上書籍)

會員: 0

訪客: 26

更多…