jQuery Mobile 的表格 Grid Layout
jQuery Mobile 自带 2 ~ 5 列的表格,分别是:class=ui-grid-a/b/c/d 示例:
jQuery Mobile 的可折叠块
I'm a header
I'm the collapsible content. By default I'm openand displayed on the page, but you can click the header to hide me.
jQuery Mobile 表单
- 支持文本框的 placeholder="..." 属性
- 通过 data-ajax="false" 禁用 Ajax 加载
- 通过data-theme让表单使用不同的主题
- 可以使用HTML5新的类型,如email, tel, number 等
jQuery Mobile 的列表 List View
列表广泛用于数据显示,导航,结果列表,数据项输入等,
jQuery Mobile包含了许多不同列表类型和格式化的例子来 覆盖大部分的设计需求。
jQuery Mobile 的各种不同列表
- 基本列表
- 嵌套列表
- 编号列表
- 只读列表
- 拆分按钮列表
- 列表分隔
- 搜索过滤器
- 气泡计数
- 缩略图和图标
jQuery Mobile 的初始化
mobileinit事件
当jQuery Mobile开始执行的时候, 它会在document对象上触发一个mobileinit 事件
$(document).bind("mobileinit", function(){ //这里是重写的代码
$.mobile.foo = bar;
});
$.mobile 的配置选项
subPageUrlKey (string, default: "ui-page"):
url参数用来引用由插件生成的子页面(例如那些由嵌套的listview生成的子页面) 例如:
example.html&ui-page=subpageIdentifir.
在&ui-page=前的部分被jquery mobile框架 用来向子页面所在的URL发送一个ajax请求.
nonHistorySelectors (string, default: "dialog"):
对于带有data-rel属性值的a标签链接 或者 带有data-role属性值的page,如果它们匹配这些选择器(即该string参数),那么它们不会在历史记录中被追踪 (即它们不会在 location.hash中被更新也不会被浏览器历史所标记).
activePageClass (string, default: "ui-page-active"):
该class被分配给当前视图中的page (包括过渡状态中的)
activeBtnClass (string, default: "ui-page-active"):
该class用于"激活"button的状态 (参见css框架).
ajaxEnabled (boolean, default: true):
当可能的时候jQuery Mobile 会自动通过ajax处理链接点击以及表单提交,如果不行,url hash 监听将会停止,url也会像常规那样发出HTTP 请求.
ajaxLinksEnabled (boolean, default: true):
只要可行的时候,jQuery Mobile 就会自动通过ajax处理链接的点击.
ajaxFormsEnabled (boolean, default: true):
只要可行的时候,jQuery Mobile 就会自动通过ajax处理页面提交.
autoInitialize (boolean, default: true):
当该选项被设置为false时 自动初始化功能将延迟嵌入页面(page)的增强功能直到
$.mobile.initializePage();被显式调用. 默认情况下当DOM加载完毕page将会被增强.
**defaultTransition (string, default: 'slide'): **
设置页面过渡效果(ajax请求),设置为'none'表示没有任何过渡效果.
**loadingMessage (string, default: "loading"): **
设置页面加载时显示的文本. 如果设置为false, 将不会显示任何文本.
metaViewportContent (string, default: "width=device-width, minimum-scale=1, maximum-scale=1"):
配置自动生成的meta标签,如果为false,将不会为DOM添加任何meta标签. gradeA (函数返回boolean值, default: 该函数默认返回 $.support.mediaquery 的值):
浏览器必须符合所有支持的条件才会返回 true.
jQuery Mobile 事件
触摸
在快速完整的一次触摸后触发该事件.
- taphold
在按住不放后触发该事件(接近一秒钟的时间).Triggers after a held complete touch event (close to one second).
- swipe 在一秒钟的间隔内水平方向上拖动30px以上会触发该事件,(水平方向 上拖动要保持在20px以内,否则不会触发).
- swipeleft 在左边方向移动时触发该事件.
- swiperight 在右边方向移动时触发该事件..
- tap
方向改变
- orientationchange
当设备的方向改变时触发 (把设备转到垂直或者水 平方向). 你绑定到此事件的回调函数可以有一个 第二参数, 该参数包含一个orientation属性,该 属性可以设置为"portrait" 或 "landscape".这些值也 被添加为HTML元素的classes,你也可以在你的css 选择器里指定它们.
要注意,当orientationChange不被支持时我们现目 前将绑定resize事件作为替代.
滚动
- scrollstart 当滚动开始时触发.要注意的是,IOS设备在滚动时 会禁止DOM操作,并将DOM操作排队,当滚动结 束时才执行这些操作.我们现在正在研究是否能够 让DOM操作在滚动之前执行
- scrollstop 滚动结束时触发.
页面隐藏和显示
- pagebeforeshow
当page正在被显示但在它的过渡效果开始前触发.
- pagebeforehide
当page正在被隐藏但在它的过渡效果开始前触发.
- pageshow
当page正在被显示但在它的过渡效果结束后触发.
- pagehide
当page正在被隐藏但在它的过渡效果结束后触发.
页面初始化
- pagebeforecreate
在页面正在初始化的时候触发(在初始化完成之前).
- pagecreate
在页面正在初始化的时候触发(在初始化完成之后).
jQuery Mobile 支持的设备
- 完全支持(A级) 很多,包括iPhone/iPad/iTouch/Android/WP7 以及一些浏览 器的手机版
- 较好支持(B级,无Ajax导航特性)
黑莓5.0/Opera Mini 5-6/Windows Phone 6.5/Symbian^3
- 基本支持(C级,仅基本页面功能可行) 黑莓4.x
- 不支持
Symbian S60/Meego/Bada/Palm WebOS 3.0
jQuery Mobile 的不足
大!
慢!