《使用jQueryMobile建设时髦的手机Web应用.ppt》由会员分享，可在线阅读，更多相关《使用jQueryMobile建设时髦的手机Web应用.ppt（31页珍藏版）》请在三一文库上搜索。
1、jQuery Mobile 构建时髦的手机 Web 网站 Winter Lau http:/ 容,手机网站（新旧对比） jQuery Mobile 简单介绍 一个最简单的 jQuery Mobile 网页 使用 jQuery Mobile 开发手机网站 jQuery Mobile 支持的设备 jQuery Mobile 的不足,jQuery Mobile 认知,jQuery Mobile 不是 jQuery 的移动版本 jQuery Mobile 是一个 jQuery 的插件 jQuery Mobile 的大小（最小化） jQuery 1.6.2 (90k) jQuery Mobile CSS
2、 (44k) jQuery Mobile JS (71K) img (10k),jQuery Mobile 的作用,可以轻松的帮助我们实现非常好看的、可跨设备的Web应用程序。 JM开发的web应用像 Native App JM 包含Web应用中的各种常用部件 对话框、表单、列表、按钮、工具条等 使用Ajax加载页面，实现炫丽的页面切换效果,jQuery Mobile 关键特点,基于 jQuery 兼容主流的手机浏览器和桌面浏览器 体积小，压缩后20K左右 HTML5风格的配置 页面自动初始化，通过 data-role 属性自动对页面部件进行初始化 触摸屏和鼠标事件支持 丰富的UI部件 可扩展
3、的页面样式框架,编写 Jquery Mobile 页面 从 Hello HTML5 开始,Hello HTML5,一个最基本的 jQuery Mobile 页面： Hello HTML5 Hello HTML5 Page content goes here. 开源中国社区 ,页面运行结果,data-role=header,data-role=content,data-role=footer,1. data-role=“page” 是可选的(从1.0b2开始) 2. 上述三个元素并非必须 3. 一个页面可以有多个date-role=“page” 并使用 id 来进行标识以及导航 例如 Secon
4、d,JM 的链接处理方式,默认的链接行为：Ajax 加载 显示(loading) 以下方式禁用 Ajax 加载链接 ref=external data-ajax=false target=xxx 返回链接 data-rel=back 其他链接 mailto: tel:15555555555 wtai:/wp/mc;15555555555 dc:234*234*234,JM 内置的6种页面主题,引入主题的方式：,JM 的工具栏/导航条,在 jQuery Mobile 中, 有两种标准类型的工具栏： Header bar 充当页面标题的作用, 通常是 mobile page中的第一个元素，一般包含
5、有一个页面标题和两个按钮。 Footer bar 通常是最后一个元素，相比于header在内容和功能上面更加自由， 但是一般包含一些文字和按钮。 导航条：,不同风格的工具栏,JM 的按钮,1. inline按钮（多个按钮放置一行） Cancel Save ,2. 分组按钮 Yes No Maybe ,JM 的表格 Grid Layout,jQuery Mobile 自带 2 5 列的表格，分别是：class=ui-grid-a/b/c/d 示例： A B C A B C A B C ,JM 的可折叠块, Im a header Im the collapsible content. By de
6、fault Im open and displayed on the page, but you can click the header to hide me. ,表单,JM 表单,支持文本框的 placeholder=“” 属性 通过 data-ajax=“false” 禁用 Ajax 加载 通过 data-theme 让表单使用不同的主题 可以使用HTML5新的类型，如email, tel, number 等 会自动根据输入的内容扩展输入框的高度，避免在手机上麻烦的滚动条,JM 的列表 List View,列表广泛用于数据显示，导航，结果列表，数据项输入等，jQuery Mobile包含
7、了许多不同 列表类型和格式化的例子来覆盖大部分的设计需求。, Acura Audi BMW ,JM 的各种不同列表,基本列表 嵌套列表 编号列表 只读列表 拆分按钮列表 列表分隔 搜索过滤器 气泡计数 缩略图和图标,在线演示：http:/ Mobile 的初始化,mobileinit事件 当jQuery Mobile开始执行的时候， 它会在document对象上触发一个mobileinit 事件 $(document).bind(“mobileinit“， function() /这里是重写的代码 $.mobile.foo = bar; );,$.mobile 的配置选项(1),subPage
8、UrlKey (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参数)，那么它们不
9、会在历史记录中被追踪 (即它们不会在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处理链接点击以及表单提交，
10、 如果不行，url hash 监听将会停止，url也会像常规那样发出HTTP 请求. ajaxLinksEnabled (boolean， default: true): 只要可行的时候，jQuery Mobile 就会自动通过ajax处理链接的点击.,$.mobile 的配置选项(2),ajaxFormsEnabled (boolean， default: true): 只要可行的时候，jQuery Mobile 就会自动通过ajax处理页面提交. autoInitialize (boolean， default: true): 当该选项被设置为false时 自动初始化功能将延迟嵌入页面(p
11、age)的增强功能直到 $.mobile.initializePage(); 被显式调用. 默认情况下当DOM加载完毕page将会被增强. defaultTransition (string， default: slide): 设置页面过渡效果(ajax请求)，设置为none表示没有任何过渡效果. loadingMessage (string， default: “loading“): 设置页面加载时显示的文本. 如果设置为false， 将不会显示任何文本. metaViewportContent (string， default: “width=device-width， minimum-s
12、cale=1， maximum-scale=1“): 配置自动生成的meta标签，如果为false，将不会为DOM添加任何meta标签. gradeA (函数返回boolean值， default: 该函数默认返回 $.support.mediaquery 的值): 浏览器必须符合所有支持的条件才会返回 true.,JM事件触摸,tap 在快速完整的一次触摸后触发该事件. taphold 在按住不放后触发该事件(接近一秒钟的时间).Triggers after a held complete touch event (close to one second). swipe 在一秒钟的间隔内水平
13、方向上拖动30px以上会触发该事件，(水平方向上拖动要保持在20px以内，否则不会触发). swipeleft 在左边方向移动时触发该事件. swiperight 在右边方向移动时触发该事件,JM事件方向改变,orientationchange 当设备的方向改变时触发 (把设备转到垂直或者水平方向). 你绑定到此事件的回调函数可以有一个第二参数， 该参数包含一个orientation属性，该属性可以设置为“portrait“ 或 “landscape“.这些值也被添加为HTML元素的classes，你也可以在你的css选择器里指定它们. 要注意，当orientationChange不被支持时我
14、们现目前将绑定resize事件作为替代.,JM事件滚动,scrollstart 当滚动开始时触发.要注意的是，IOS设备在滚动时会禁止DOM操作，并将DOM操作排队，当滚动结束时才执行这些操作.我们现在正在研究是否能够让DOM操作在滚动之前执行 scrollstop 滚动结束时触发.,JM事件页面隐藏和显示,pagebeforeshow 当page正在被显示但在它的过渡效果开始前触发. pagebeforehide 当page正在被隐藏但在它的过渡效果开始前触发. pageshow 当page正在被显示但在它的过渡效果结束后触发. pagehide 当page正在被隐藏但在它的过渡效果结束后触
15、发.,JM事件页面初始化,pagebeforecreate 在页面正在初始化的时候触发(在初始化完成之前). pagecreate 在页面正在初始化的时候触发(在初始化完成之后).,JM 支持的设备,完全支持(A级) 很多，包括iPhone/iPad/iTouch/Android/WP7 以及一些浏览器的手机版 较好支持(B级，无Ajax导航特性) 黑莓5.0/Opera Mini 5-6/Windows Phone 6.5/Symbian3 基本支持(C级，仅基本页面功能可行) 黑莓4.x 不支持 Symbian S60/Meego/Bada/Palm WebOS 3.0,JM 的不足,大！ 慢！ 慢！,谢谢大家！,