一. JQM提供的网格布局系统
- jqm提供的布局系统没有预定义 margin或padding
-
jqm中的“行”分为四种
默 认：一行中只有一列，列宽 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中一行默认只能等分N列，若不想等分，只能自定义样式
-
列中若防止button，则默认填满整理，若是链接或input按钮，默认会添加左右margin:5px
-
JQM提供的组件-分组和分隔，模拟实现bootstrap中的panel
<div/h3 class="ui-bar ui-bar-a"></div/h3> <div/p class="ui-body ui-body-b"></div/p>
二. jqum提供的组件-Table-真实的响应式表格
-
列切换(column toggle)模式的响应式表格
<table data-role="table" class="ui-responsive" data-mode="columntoggle"> <thead> <tr> <th>必须显示的列</th> <th data-priority="6">优先级最低(最先被隐藏)</th> <th></th> 。。。 <th data-priority="1">优先级最高(最后被隐藏)</th> <th></th> </tr> </thead> </table> -
回流(reflow)模式的响应式表格
<table data-role="table" class="ui-responsive" data-mode="reflow"> <table> 屏幕够宽时显示效果与普通表格相同，不够宽时每一行数据都会独立显示
三. JQM提供的组件-ListView(列表组)
<ul/ol data-role="listview">
<li></li>
</ul>
四. jqm提供的组件-表单组件
-
textInput组件：
1）单行文本输入域 2）多行文本输入域 3）下拉框组件 -
特殊的form控件
-
滑块组件
<input type="range"> -
开关控件
<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> -
复选按钮组
<fieldset data-role="controlgroup" data-type="vertical/horizontal"> <legend>legend</legend> <input type="checkbox"> <label></label> </fieldset>
五、触屏设备中的事件
-
JQM扩展了标准的事件
orientationchange: 浏览设备的方向改变 pagebeforecreate: JQM Page创建之前 - 挂到DOM树之前 pagecreate: JQM Page被创建 - 挂到DOM树 pageinit: JQM Page 开始初始化 - 挂到DOM树开始初始化 pagechange: JQM 当前Page发生改变，且切换动画完成之后 swipe:手指在屏幕上滑动 swipeleft: 手指在屏幕上向右滑动 swiperight: 手指在人屏幕向右滑动 tap: 手指在屏幕上轻击一下 taphold: 长按提示： 上诉事件监听函数的绑定不能直接写在html中，只能使用jquery提供的事件绑定函数实现
$("").on("swipeleft",fn);
JQM中提供的几个Page相关事件触发顺序：
pagebeforeload->pageload->pagebeforecreate->pagecreate->pageinit->pagechange
js控制页面跳转
$.mobile.changePage("3-2.html",{transitoin:"slide"});
-
NG基于JQM扩展了标准的事件
1） 自定义模块声明要依赖ngTouch模块，就可以使用触屏相关的指令
2） ngClick/ngSwipeLeft/ngSwipeRight
-
ngRoute与JQM中的页面跳转有何异同
1）相同点
完整的HTML只需要一个，使用异步AJAX请求获取下一个页面
可以实现转场动画
2）不同点
.1 ngRoute需要配置路由字典，JQM没有路字典
.2 ngRoute访问路由地址的格式 - 特殊格式的hash
http://xxx/index.html#/main
jQM访问页面地址- 普通的url
http://xxx/tpl/main.html
.3 ngRoute访问的路由页面可以使用F5刷新，JQM的页面不能按F5刷新
.4 ngRoute-index.html只能声明一个ngview容器，JQM中index.html可以声明多个page
.5 ngRoute: 模板页面中的所有内容都会被挂到ngview；jQM模板页面只有第一个page会被挂载到当前DOM树
.6 ngRoute路由参数在两个页面间传递数据
http://index.html#/detail/101
JQM通过请求字符串或者H5提供的本地存储在两个页面间传递数据
http://tpl/detail.html?num=102
- 重新编译新挂载的page
//监听新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();
})
});
网友评论