一. 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.
-
JQM主要分為四部分：
頁面&導航 CSS框架 組件 表單控件
3 使用JQM的步驟
1） 項目中引入jquery1.8+版本
2) 項目創建jqm目錄，引入jqm必需資源文件
jquery-mobile.css
jquery-mobile.js
images/...
3) 創建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中的所有的網頁內容不能直接至于body中，必須至于page中
- jqm中的所有樣式都是通過預定義class來設置的，開發者可以指定元素的class,也可以為元素指定data-*擴展屬性來實現讓jqm添加class的功能
二. jqueryMobile-page跳轉及過場動畫
頁面跳轉可以使用a/button/input等，推薦使用a-會自動添加過場動畫
可以跳轉到外部的完整HTML頁面；也可以跳轉到當前HTML中的另一個page,如
1)跳轉到外部完整的HTML頁面
<a href="xx.html">
2)跳轉到當前HTML中的另一個page
<a href="#pageID">
-
已模態框形式打開另一個page
<a href="#pageID" data-rel="dialog">-
JQM為頁面切換添加了非常豐富的過渡動畫，使用方法
<a href="目標頁面" data-transition="動畫效果名稱">可用的動畫效果有：
fade:默認動畫
pop:彈出動畫
slide:滑動動畫
slideup:向上滑動動畫
trun:翻轉動畫
flip:翻轉動畫
flow:流動動畫
none:無動畫
-
三. jqueryMobile-按鈕
可以使用A.button.input元素實現按鈕的樣式
可以使用data-role="button"屬性實現按鈕樣式，也可以指定class實現按鈕的樣式，如ui-btn ui-corner-all ui-shadow
按鈕默認是塊級顯示，可以使用ui-btn-inline實現行內按鈕
按鈕上可以有文字和圖標，若存在圖標，必須指定與文字的位置關系,可選值
btn-icon-left
btn-icon-right
btn-icon-bottom
btn-icon-top
創建帶圖標的按鈕，圖標功能：后退，前進，刷新，配置，用戶，定位，主頁，對勾....
- 按鈕可以放到page的header里
header中的第一個按鈕默認處于左側，第二個按鈕處于右側，一般只放兩個
<div data-role="header">
<a href="#">按鈕</a> 默認就是按鈕效果
</div>
四. jqueryMobile-導航條
-
基本結構
<div data-role="navbar"> <ul> <li><a href="#"></a> </ul> </div> -
注意
導航條中一般最多只能有五個項目，超過5個會在一行中顯示2個 導航條可以出現在page的Header/Main/Footer 處于Header和Footer中的navbar默認會占滿整行，并和標題字錯開
五. jqueryMobile-load加載器
顯示加載器： $.mobile.loading("show");
取消加載器：$.mobile.loading("hidden");
六. jqueryMobile-panel(面板)
-
面板在目前版本的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> -
面板組件可以指定出現位置和打開方式
data-position="left/right" data-display = "reveal/overlay/push"
七. jqueryMobile-折疊組件(collapsible)和手風琴效果(collapsibleset)
-
折疊組件
<div data-role="collapsible"> <h3>標題字</h3> <div>折疊的內容</div> </div> -
手風琴
<div data-role="collapsibleset"> <div data-role="collapsible"> <h3>標題字</h3> <div>折疊的內容</div> </div> <div data-role="collapsible"> <h3>標題字</h3> <div>折疊的內容</div> </div> </div>
八. 關于jqm的手冊
下載安裝包Demo-初期
-
完整的API列表(在線) - 后期
九. 關于jqm page的切換-深入探討
- 一個HTML聲明多個page
不足：即使不顯示的Page，初始化時也會被客戶端請求下來
- 一個HTML只聲明一個Page，通過超鏈接進行頁面跳轉
1)jqm已經完全改寫了超鏈接的默認行為-把同步請求轉為AJAX請求
2) 異步請求得到的HTML頁面，只會保留其中的第一個page,添加到DOM樹上，其他所有內容全部刪除。
3) 推薦一個項目中只有起始頁是完整的HTML頁面，其他被跳轉到的頁面都是page片段-只包含一個page的聲明
4）jqm項目中所有的HTML頁面中元素的id應該是全局唯一的
