一. JQM提供的網(wǎng)格布局系統(tǒng)
- jqm提供的布局系統(tǒng)沒(méi)有預(yù)定義 margin或padding
-
jqm中的“行”分為四種
默 認(rèn)：一行中只有一列，列寬 100%
ui-grid-a 一行中有二列并等分 列寬 50%
ui-grid-b 一行中有三列并等分 列寬 33%
ui-grid-c 一行中有四列并等分 列寬 25%
ui-grid-d 一行中有五列并等分 列寬 20% -
jqm中的列依次排序
第一列： ul-block-a
第二列： ul-block-b
第三列： ul-block-c
第四列： ul-block-d
第五列： ul-block-e jqm中的所有ul-block-a必須重起一行
jqm中一行默認(rèn)只能等分N列，若不想等分，只能自定義樣式
列中若防止button，則默認(rèn)填滿(mǎn)整理，若是鏈接或input按鈕，默認(rèn)會(huì)添加左右margin:5px
-
JQM提供的組件-分組和分隔，模擬實(shí)現(xiàn)bootstrap中的panel
<div/h3 class="ui-bar ui-bar-a"></div/h3> <div/p class="ui-body ui-body-b"></div/p>
二. jqum提供的組件-Table-真實(shí)的響應(yīng)式表格
-
列切換(column toggle)模式的響應(yīng)式表格
<table data-role="table" class="ui-responsive" data-mode="columntoggle"> <thead> <tr> <th>必須顯示的列</th> <th data-priority="6">優(yōu)先級(jí)最低(最先被隱藏)</th> <th></th> 。。。 <th data-priority="1">優(yōu)先級(jí)最高(最后被隱藏)</th> <th></th> </tr> </thead> </table> -
回流(reflow)模式的響應(yīng)式表格
<table data-role="table" class="ui-responsive" data-mode="reflow"> <table> 屏幕夠?qū)挄r(shí)顯示效果與普通表格相同，不夠?qū)挄r(shí)每一行數(shù)據(jù)都會(huì)獨(dú)立顯示
三. JQM提供的組件-ListView(列表組)
<ul/ol data-role="listview">
<li></li>
</ul>
四. jqm提供的組件-表單組件
-
textInput組件：
1）單行文本輸入域 2）多行文本輸入域 3）下拉框組件 特殊的form控件
-
滑塊組件
<input type="range"> -
開(kāi)關(guān)控件
<select data-role="slider"> <option></option> <option></option> </select> -
單選按鈕組
<fieldset data-role="controlgroup" data-type="vertical/horizontal"> <legend>legend</legend> <input type="radio"> <label></label> </fieldset> -
復(fù)選按鈕組
<fieldset data-role="controlgroup" data-type="vertical/horizontal"> <legend>legend</legend> <input type="checkbox"> <label></label> </fieldset>
五、觸屏設(shè)備中的事件
-
JQM擴(kuò)展了標(biāo)準(zhǔn)的事件
orientationchange: 瀏覽設(shè)備的方向改變 pagebeforecreate: JQM Page創(chuàng)建之前 - 掛到DOM樹(shù)之前 pagecreate: JQM Page被創(chuàng)建 - 掛到DOM樹(shù) pageinit: JQM Page 開(kāi)始初始化 - 掛到DOM樹(shù)開(kāi)始初始化 pagechange: JQM 當(dāng)前Page發(fā)生改變，且切換動(dòng)畫(huà)完成之后 swipe:手指在屏幕上滑動(dòng) swipeleft: 手指在屏幕上向右滑動(dòng) swiperight: 手指在人屏幕向右滑動(dòng) tap: 手指在屏幕上輕擊一下 taphold: 長(zhǎng)按提示： 上訴事件監(jiān)聽(tīng)函數(shù)的綁定不能直接寫(xiě)在html中，只能使用jquery提供的事件綁定函數(shù)實(shí)現(xiàn)
$("").on("swipeleft",fn);
JQM中提供的幾個(gè)Page相關(guān)事件觸發(fā)順序：
pagebeforeload->pageload->pagebeforecreate->pagecreate->pageinit->pagechange
js控制頁(yè)面跳轉(zhuǎn)
$.mobile.changePage("3-2.html",{transitoin:"slide"});
-
NG基于JQM擴(kuò)展了標(biāo)準(zhǔn)的事件
1） 自定義模塊聲明要依賴(lài)ngTouch模塊，就可以使用觸屏相關(guān)的指令
2） ngClick/ngSwipeLeft/ngSwipeRight
ngRoute與JQM中的頁(yè)面跳轉(zhuǎn)有何異同
1）相同點(diǎn)
完整的HTML只需要一個(gè)，使用異步AJAX請(qǐng)求獲取下一個(gè)頁(yè)面
可以實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
2）不同點(diǎn)
.1 ngRoute需要配置路由字典，JQM沒(méi)有路字典
.2 ngRoute訪(fǎng)問(wèn)路由地址的格式 - 特殊格式的hash
http://xxx/index.html#/main
jQM訪(fǎng)問(wèn)頁(yè)面地址- 普通的url
http://xxx/tpl/main.html
.3 ngRoute訪(fǎng)問(wèn)的路由頁(yè)面可以使用F5刷新，JQM的頁(yè)面不能按F5刷新
.4 ngRoute-index.html只能聲明一個(gè)ngview容器，JQM中index.html可以聲明多個(gè)page
.5 ngRoute: 模板頁(yè)面中的所有內(nèi)容都會(huì)被掛到ngview；jQM模板頁(yè)面只有第一個(gè)page會(huì)被掛載到當(dāng)前DOM樹(shù)
.6 ngRoute路由參數(shù)在兩個(gè)頁(yè)面間傳遞數(shù)據(jù)
http://index.html#/detail/101
JQM通過(guò)請(qǐng)求字符串或者H5提供的本地存儲(chǔ)在兩個(gè)頁(yè)面間傳遞數(shù)據(jù)
http://tpl/detail.html?num=102
- 重新編譯新掛載的page
//監(jiān)聽(tīng)新page被初始化事件-使用angular重新編譯新掛載的page
angular.element('body').on("pageinit",function(event){
var scope = angular.element(event.target).scope();
angular.element(event.target).injector().invoke(function($compile){
$compile(event.target)(scope);
scope.$digest();
})
});
