2.28學習經(jīng)驗分享#
Bruce_Zhu于2017.2.28
一. 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） 項目創(chuàng)建jqm目錄捣炬，引入jqm必需資源文件
jquery-mobile.css
jquery-mobile.js
images/...
- 創(chuàng)建html文件，引入必需的css和js,并設置viewport
<meta name="viewport" content="width=device-width,initial-scale=1>
- body中data-role="page"元素
注意： jqm的html文件中婿屹，body中必須至少有一個page推溃，若用戶未提供，jqm自動添加
body中可以聲明多個page,但默認只有第一個可以顯示
jqm中的所有的網(wǎng)頁內(nèi)容不能直接至于body中蜂奸，必須至于page中
jqm中的所有樣式都是通過預定義class來設置的硬萍，開發(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)按鈕
按鈕上可以有文字和圖標儒鹿，若存在圖標，必須指定與文字的位置關系,可選值
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("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>
-
面板組件可以指定出現(xiàn)位置和打開方式
data-position="left/right" data-display = "reveal/overlay/push"
七. jqueryMobile-折疊組件(collapsible)和手風琴效果(collapsibleset)
-
折疊組件
<div data-role="collapsible"> <h3>標題字</h3> <div>折疊的內(nèi)容</div> </div> -
手風琴
<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>
