一. 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主要分為四部分：
   
     頁面&導(dǎo)航
     CSS框架
     組件
     表單控件

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

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

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

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

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

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

    注意：  jqm的html文件中，body中必須至少有一個(gè)page，若用戶未提供，jqm自動(dòng)添加

            body中可以聲明多個(gè)page,但默認(rèn)只有第一個(gè)可以顯示

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

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

二. jqueryMobile-page跳轉(zhuǎn)及過場動(dòng)畫

 1. 頁面跳轉(zhuǎn)可以使用a/button/input等，推薦使用a-會(huì)自動(dòng)添加過場動(dòng)畫

 2. 可以跳轉(zhuǎn)到外部的完整HTML頁面；也可以跳轉(zhuǎn)到當(dāng)前HTML中的另一個(gè)page,如

 1)跳轉(zhuǎn)到外部完整的HTML頁面

   <a href="xx.html">

 2)跳轉(zhuǎn)到當(dāng)前HTML中的另一個(gè)page

   <a href="#pageID">

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

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

 3. JQM為頁面切換添加了非常豐富的過渡動(dòng)畫，使用方法

  <a href="目標(biāo)頁面" data-transition="動(dòng)畫效果名稱">

  可用的動(dòng)畫效果有：

    fade:默認(rèn)動(dòng)畫
    pop:彈出動(dòng)畫
    slide:滑動(dòng)動(dòng)畫
    slideup:向上滑動(dòng)動(dòng)畫
    trun:翻轉(zhuǎn)動(dòng)畫
    flip:翻轉(zhuǎn)動(dòng)畫
    flow:流動(dòng)動(dòng)畫
    none:無動(dòng)畫

三. jqueryMobile-按鈕

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

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

 3. 按鈕默認(rèn)是塊級(jí)顯示，可以使用ui-btn-inline實(shí)現(xiàn)行內(nèi)按鈕

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

創(chuàng)建帶圖標(biāo)的按鈕，圖標(biāo)功能：后退，前進(jìn)，刷新，配置，用戶，定位，主頁，對(duì)勾....


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

 header中的第一個(gè)按鈕默認(rèn)處于左側(cè)，第二個(gè)按鈕處于右側(cè)，一般只放兩個(gè)
 
 <div data-role="header">

   <a href="#">按鈕</a> 默認(rèn)就是按鈕效果

 </div>

四. jqueryMobile-導(dǎo)航條

  1. 基本結(jié)構(gòu)

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

        </ul>

      </div>

  2. 注意

      導(dǎo)航條中一般最多只能有五個(gè)項(xiàng)目，超過5個(gè)會(huì)在一行中顯示2個(gè)

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

      處于Header和Footer中的navbar默認(rèn)會(huì)占滿整行，并和標(biāo)題字錯(cuò)開

五. 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)位置和打開方式

      ?。?！注意：是對(duì)panel進(jìn)行設(shè)置
     data-position="left/right"

     data-display = "reveal/overlay/push"

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

1. 折疊組件

   <div data-role="collapsible">
     <h3>標(biāo)題字</h3>
     <div>折疊的內(nèi)容</div>
   </div>

2. 手風(fēng)琴

   <div data-role="collapsibleset">

      <div data-role="collapsible">
        <h3>標(biāo)題字</h3>
        <div>折疊的內(nèi)容</div>
      </div>

      <div data-role="collapsible">
        <h3>標(biāo)題字</h3>
        <div>折疊的內(nèi)容</div>
      </div>

   </div>

八. 關(guān)于jqm的手冊(cè)

1. 下載安裝包Demo-初期

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

 http://api.jquerymobile.com

九. 關(guān)于jqm page的切換-深入探討

 1. 一個(gè)HTML聲明多個(gè)page

 不足：即使不顯示的Page，初始化時(shí)也會(huì)被客戶端請(qǐng)求下來

 2. 一個(gè)HTML只聲明一個(gè)Page，通過超鏈接進(jìn)行頁面跳轉(zhuǎn)

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

 2) 異步請(qǐng)求得到的HTML頁面，只會(huì)保留其中的第一個(gè)page,添加到DOM樹上，其他所有內(nèi)容全部刪除。

 3) 推薦一個(gè)項(xiàng)目中只有起始頁是完整的HTML頁面，其他被跳轉(zhuǎn)到的頁面都是page片段-只包含一個(gè)page的聲明

 4）jqm項(xiàng)目中所有的HTML頁面中元素的id應(yīng)該是全局唯一的