一. 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主要分為四部分：
頁面&導(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)及過場(chǎng)動(dòng)畫
頁面跳轉(zhuǎn)可以使用a/button/input等，推薦使用a-會(huì)自動(dòng)添加過場(chǎng)動(dòng)畫
可以跳轉(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">
-
已模態(tài)框形式打開另一個(gè)page
<a href="#pageID" data-rel="dialog">-
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-按鈕
可以使用A.button.input元素實(shí)現(xiàn)按鈕的樣式
可以使用data-role="button"屬性實(shí)現(xiàn)按鈕樣式悔醋，也可以指定class實(shí)現(xiàn)按鈕的樣式摩窃，如ui-btn ui-corner-all ui-shadow
按鈕默認(rèn)是塊級(jí)顯示，可以使用ui-btn-inline實(shí)現(xiàn)行內(nèi)按鈕
按鈕上可以有文字和圖標(biāo)芬骄，若存在圖標(biāo)猾愿，必須指定與文字的位置關(guān)系,可選值
btn-icon-left
btn-icon-right
btn-icon-bottom
btn-icon-top
創(chuàng)建帶圖標(biāo)的按鈕，圖標(biāo)功能：后退账阻，前進(jìn)蒂秘，刷新，配置淘太，用戶姻僧，定位，主頁蒲牧，對(duì)勾....
- 按鈕可以放到page的header里
header中的第一個(gè)按鈕默認(rèn)處于左側(cè)撇贺，第二個(gè)按鈕處于右側(cè)，一般只放兩個(gè)
<div data-role="header">
<a href="#">按鈕</a> 默認(rèn)就是按鈕效果
</div>
四. jqueryMobile-導(dǎo)航條
-
基本結(jié)構(gòu)
<div data-role="navbar"> <ul> <li><a href="#"></a> </ul> </div> -
注意
導(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("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> -
面板組件可以指定出現(xiàn)位置和打開方式
data-position="left/right" data-display = "reveal/overlay/push"
七. jqueryMobile-折疊組件(collapsible)和手風(fēng)琴效果(collapsibleset)
-
折疊組件
<div data-role="collapsible"> <h3>標(biāo)題字</h3> <div>折疊的內(nèi)容</div> </div> -
手風(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è)
下載安裝包Demo-初期
-
完整的API列表(在線) - 后期
九. 關(guān)于jqm page的切換-深入探討
- 一個(gè)HTML聲明多個(gè)page
不足：即使不顯示的Page晒屎，初始化時(shí)也會(huì)被客戶端請(qǐng)求下來
- 一個(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)該是全局唯一的
