jQueryMobile--基礎

框架整理：

(1)jQuery是一個JS函數庫，簡化了DOM&AJAX操做，本質與DOM相同   WriteLess，DoMore。

(2)jQueryUI是一個HTML組件庫，豐富了HTML的功能。

(3)Twitter Bootstrap是一個HTML/CSS/JS框架，簡化了響應式網頁的編寫，提供了柵格系統+CSSReset+HTML組件。

(4)Google AngularJS是一個JS框架，改變了網頁的編寫方式，適用於以數據操做爲主的SPA應用。

(5)jQueryMobile是一個HTML組件庫，適用於移動App的開發。

 

 

bootstrap：腳步、起步、引導程序

 

 

1.jQueryMobile概述

  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.

主要內容能夠分爲四個部分：

  (1)頁面&導航

  (2)CSS框架

  (3)組件

  (4)表單組件

 

 

 

2.使用jQM的步驟

  (1)項目中引入jquery 1.8+

  (2)項目中建立jqm目錄，引入jqm必需資源文件

jquery-mobile.css

jquery-mobile.js

images/....

  (3)建立HTML頁面，引入必需的css和js

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

 

提示：

(1)jQM的HTML文件中，body中必須至少有一個Page,若用戶未提供，jqm自動添加；

(2)body中能夠聲明多個Page，但默認只有第一個能夠顯示。

(3)jQM中全部的網頁內容不能直接置於body中，必須置於Page中。

(4)jQM中全部的樣式都是經過預約義的class來設置的，開發者能夠直接指定元素的class，也能夠爲元素指定data-*擴展屬性來實現讓jqm添加class的功能。

 

 

老版本的jQM提供了a/b/c/d/e/f六種主題色； 新版本只提供了默認的a(淺底深字)/b(深底淺字)兩個主題。

 

 

3.頁面跳轉和過場動畫

  (1)頁面跳轉能夠使用<a>、<button>、<input type="button">等元素，推薦使用<a>——會自動添加過場動畫。

  (2) 能夠跳轉到外部的完整HTML頁面；也能夠跳轉到當前HTML中的另外一個Page，如：

跳轉到外部完整HTML頁面：

<a href="xx.html">

跳轉到當前HTML中的另外一個Page：

<a href="#pageID">

以模態框形式打開另外一個Page：

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

 

  ------------------------------------------------------------

 

  jQM爲頁面切換添加了很是豐富的過渡動畫，使用方法：

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

  可用的動畫效果有：

fade、pop、slide、slideup、slidedown、slidefade、turn、flip、flow、none

 

 

4.按鈕（Buttons）

  (1)能夠使用A、BUTTON、INPUT元素實現按鈕的樣式

  (2)能夠使用data-role="button"屬性實現按鈕樣式；也能夠指定class實現按鈕樣式，如.ui-btn .ui-corner-all .ui-shadow

  (3)按鈕默認是塊級顯示，能夠使用.ui-btn-inline實現行內按鈕

  (4)按鈕上能夠有文字和圖標；若存在圖標，必須指定與文字的位置關係；可選值：

.ui-btn-icon-left

.ui-btn-icon-right

.ui-btn-icon-bottom

.ui-btn-icon-top

.ui-btn-icon-notext

  (5)按鈕能夠置於Page的Header中

Header中的第一個按鈕默認處於左側，第二個默認處於右側，通常只放兩個。

<div data-role="header">

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

</div>

 

 

5.導航條(navbar)

  基本結構：

<div data-role="navbar">

<ul>

<li><a href="#"></a></li>

</ul>

</div>

  說明：

(1)導航條中通常最多隻能有5個項目，超過5個會在一行中只顯示2個；

(2)導航條能夠出如今Page的Header、Main、Footer中；

(3)處於Header和Footer中navbar默認會佔滿整行，並和標題字錯開。

 

 

6.Loader(加載器)

顯示"加載中"圖片：  $.mobile.loading('show');

隱藏"加載中"圖片：  $.mobile.loading('hide');

 

7.Panel(面板)

  注意：面板在目前版本的jqm中只能放在Page中，Header以前或Footer以後

<div data-role="page">

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

 

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

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

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

 

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

</div>

  面板組件能夠指定出現位置：  data-position="left / right"

  以及打開方式：data-display="reveal / overlay / push"

 

 

8.摺疊組件(Collapsible)和手風琴效果(CollapsibleSet)

  摺疊組件：

<div data-role="collapsible">

<h3>標題字</h3>

<div>摺疊的內容</div>

</div>

  摺疊組件集合——手風琴效果

<div data-role="collapsibleset">

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

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

</div>