一. JQueryMobile

1.  jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.

2. JQM主要分為四部分：
   
     頁面&導航
     CSS框架
     組件
     表單控件

3 使用JQM的步驟
    
  1） 項目中引入jquery1.8+版本

  2)  項目創(chuàng)建jqm目錄锡搜，引入jqm必需資源文件

        jquery-mobile.css
        jquery-mobile.js
        images/...

  3)  創(chuàng)建html文件蹲堂，引入必需的css和js,并設置viewport

         <meta name="viewport" content="width=device-width,initial-scale=1>

  4) body中data-role="page"元素

    注意：  jqm的html文件中，body中必須至少有一個page议街，若用戶未提供，jqm自動添加

            body中可以聲明多個page,但默認只有第一個可以顯示

            jqm中的所有的網(wǎng)頁內容不能直接至于body中忙灼，必須至于page中

            jqm中的所有樣式都是通過預定義class來設置的味咳，開發(fā)者可以指定元素的class,也可以為元素指定data-*擴展屬性來實現(xiàn)讓jqm添加class的功能

二. jqueryMobile-page跳轉及過場動畫

 1. 頁面跳轉可以使用a/button/input等肮柜，推薦使用a-會自動添加過場動畫

 2. 可以跳轉到外部的完整HTML頁面棍弄；也可以跳轉到當前HTML中的另一個page,如

 1)跳轉到外部完整的HTML頁面

   <a href="xx.html">

 2)跳轉到當前HTML中的另一個page

   <a href="#pageID">

 3) 已模態(tài)框形式打開另一個page

    <a href="#pageID" data-rel="dialog">

 3. JQM為頁面切換添加了非常豐富的過渡動畫望薄，使用方法

  <a href="目標頁面" data-transition="動畫效果名稱">

  可用的動畫效果有：

    fade:默認動畫
    pop:彈出動畫
    slide:滑動動畫
    slideup:向上滑動動畫
    trun:翻轉動畫
    flip:翻轉動畫
    flow:流動動畫
    none:無動畫

三. jqueryMobile-按鈕

 1. 可以使用A.button.input元素實現(xiàn)按鈕的樣式

 2. 可以使用data-role="button"屬性實現(xiàn)按鈕樣式，也可以指定class實現(xiàn)按鈕的樣式呼畸，如ui-btn ui-corner-all ui-shadow

 3. 按鈕默認是塊級顯示痕支，可以使用ui-btn-inline實現(xiàn)行內按鈕

 4. 按鈕上可以有文字和圖標，若存在圖標蛮原，必須指定與文字的位置關系,可選值
  ui-btn-icon-left
  ui-btn-icon-right
  ui-btn-icon-bottom
  ui-btn-icon-top
  ui-btn-icon-notext  只顯示圖標

創(chuàng)建帶圖標的按鈕卧须，圖標功能：后退，前進儒陨，刷新花嘶，配置，用戶蹦漠，定位椭员，主頁，對勾....


 5. 按鈕可以放到page的header里

 header中的第一個按鈕默認處于左側津辩，第二個按鈕處于右側拆撼，一般只放兩個
 
 <div data-role="header">

   <a href="#">按鈕</a> 默認就是按鈕效果

 </div>

四. jqueryMobile-導航條

  1. 基本結構

      <div data-role="navbar">
        <ul>
          <li><a href="#"></a>

        </ul>

      </div>

  2. 注意

      導航條中一般最多只能有五個項目容劳，超過5個會在一行中顯示2個

      導航條可以出現(xiàn)在page的Header/Main/Footer

      處于Header和Footer中的navbar默認會占滿整行喘沿，并和標題字錯開

五. jqueryMobile-load加載器

  顯示加載器： $.mobile.loading("show");

  取消加載器：$.mobile.loading("hide");

六. jqueryMobile-panel(面板)

  1) 面板在目前版本的jqp中只能放在page中，header之前和footer之后

     <div data-role="page">

          <div data-role="panel" id="p1"></div>

          <div data-role="header"></div>

          <div data-role="body">

              <a href="#面板ID">打開面板</a>

          </div>

          <div data-role="footer"></div>

          <div data-role="panel" id="p1"></div>

     </div>

  2) 面板組件可以指定出現(xiàn)位置和打開方式

      ＝叻贰Ｑ劣　！注意：是對panel進行設置
     data-position="left/right"

     data-display = "reveal/overlay/push"

七. jqueryMobile-折疊組件(collapsible)和手風琴效果(collapsibleset)

1. 折疊組件

   <div data-role="collapsible">
     <h3>標題字</h3>
     <div>折疊的內容</div>
   </div>

2. 手風琴

   <div data-role="collapsibleset">

      <div data-role="collapsible">
        <h3>標題字</h3>
        <div>折疊的內容</div>
      </div>

      <div data-role="collapsible">
        <h3>標題字</h3>
        <div>折疊的內容</div>
      </div>

   </div>

八. 關于jqm的手冊

1. 下載安裝包Demo-初期

2. 完整的API列表(在線) - 后期

 http://api.jquerymobile.com

九. 關于jqm page的切換-深入探討

 1. 一個HTML聲明多個page

 不足：即使不顯示的Page留量，初始化時也會被客戶端請求下來

 2. 一個HTML只聲明一個Page窄赋，通過超鏈接進行頁面跳轉

 1)jqm已經(jīng)完全改寫了超鏈接的默認行為-把同步請求轉為AJAX請求

 2) 異步請求得到的HTML頁面哟冬，只會保留其中的第一個page,添加到DOM樹上，其他所有內容全部刪除忆绰。

 3) 推薦一個項目中只有起始頁是完整的HTML頁面浩峡，其他被跳轉到的頁面都是page片段-只包含一個page的聲明

 4）jqm項目中所有的HTML頁面中元素的id應該是全局唯一的