一. JQueryMobile
jQuery Mobile是一個基于HTML5的用戶界面系統(tǒng)爵嗅，旨在使所有智能手機，平板電腦和臺式機設(shè)備上都能訪問的響應(yīng)式網(wǎng)站和應(yīng)用疲恢。
-
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,并設(shè)置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)頁內(nèi)容不能直接至于body中杂数，必須至于page中
jqm中的所有樣式都是通過預(yù)定義class來設(shè)置的宛畦，開發(fā)者可以指定元素的class,也可以為元素指定data-*擴展屬性來實現(xiàn)讓jqm添加class的功能
二. jqueryMobile-page跳轉(zhuǎn)及過場動畫
頁面跳轉(zhuǎn)可以使用a/button/input等，推薦使用a-會自動添加過場動畫
可以跳轉(zhuǎn)到外部的完整HTML頁面揍移；也可以跳轉(zhuǎn)到當前HTML中的另一個page,如
1)跳轉(zhuǎn)到外部完整的HTML頁面
<a href="xx.html">
2)跳轉(zhuǎn)到當前HTML中的另一個page
<a href="#pageID">
3) 已模態(tài)框形式打開另一個page
<a href="#pageID" data-rel="dialog">
-
JQM為頁面切換添加了非常豐富的過渡動畫次和，使用方法
<a href="目標頁面" data-transition="動畫效果名稱">可用的動畫效果有：
fade:默認動畫
pop:彈出動畫
slide:滑動動畫
slideup:向上滑動動畫
trun:翻轉(zhuǎn)動畫
flip:翻轉(zhuǎn)動畫
flow:流動動畫
none:無動畫
三. jqueryMobile-按鈕
可以使用A.button.input元素實現(xiàn)按鈕的樣式
可以使用data-role="button"屬性實現(xiàn)按鈕樣式，也可以指定class實現(xiàn)按鈕的樣式那伐，如ui-btn ui-corner-all ui-shadow
按鈕默認是塊級顯示踏施，可以使用ui-btn-inline實現(xiàn)行內(nèi)按鈕
按鈕上可以有文字和圖標，若存在圖標罕邀，必須指定與文字的位置關(guān)系,可選值
btn-icon-left
btn-icon-right
btn-icon-bottom
btn-icon-top
創(chuàng)建帶圖標的按鈕畅形，圖標功能：后退，前進诉探，刷新日熬，配置，用戶阵具，定位碍遍，主頁，對勾....
- 按鈕可以放到page的header里
header中的第一個按鈕默認處于左側(cè)阳液，第二個按鈕處于右側(cè)怕敬，一般只放兩個
<div data-role="header">
<a href="#">按鈕</a> 默認就是按鈕效果
</div>
四. jqueryMobile-導航條
-
基本結(jié)構(gòu)
<div data-role="navbar"> <ul> <li><a href="#"></a> </ul> </div> -
注意
導航條中一般最多只能有五個項目，超過5個會在一行中顯示2個 導航條可以出現(xiàn)在page的Header/Main/Footer 處于Header和Footer中的navbar默認會占滿整行帘皿，并和標題字錯開
五. jqueryMobile-load加載器
顯示加載器： $.mobile.loading("show");
取消加載器：$.mobile.loading("hidden");
六. 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)位置和打開方式
data-position="left/right"
data-display = "reveal/overlay/push"
七. jqueryMobile-折疊組件(collapsible)和手風琴效果(collapsibleset)
1. 折疊組件
<div data-role="collapsible">
<h3>標題字</h3>
<div>折疊的內(nèi)容</div>
</div>
2. 手風琴
<div data-role="collapsibleset">
<div data-role="collapsible">
<h3>標題字</h3>
<div>折疊的內(nèi)容</div>
</div>
<div data-role="collapsible">
<h3>標題字</h3>
<div>折疊的內(nèi)容</div>
</div>
</div>