使用jQuery Mobile 建设时髦的手机.ppt

JM事件——滚动 scrollstart 当滚动开始时触发.要注意的是，IOS设备在滚动时会禁止DOM操作，并将DOM操作排队，当滚动结束时才执行这些操作.我们现在正在研究是否能够让DOM操作在滚动之前执行 scrollstop 滚动结束时触发. JM事件——页面隐藏和显示 pagebeforeshow 当page正在被显示但在它的过渡效果开始前触发. pagebeforehide 当page正在被隐藏但在它的过渡效果开始前触发. pageshow 当page正在被显示但在它的过渡效果结束后触发. pagehide 当page正在被隐藏但在它的过渡效果结束后触发. JM事件——页面初始化 pagebeforecreate 在页面正在初始化的时候触发(在初始化完成之前). pagecreate 在页面正在初始化的时候触发(在初始化完成之后). JM 支持的设备 完全支持(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 JM 的不足 大！ 慢！ 慢！ 自由·开放·分享 自由·开放·分享 自由·开放·分享 自由·开放·分享 自由·开放·分享 jQuery Mobile 构建时髦的手机 Web 网站 Winter Lau /javayou 内 容 手机网站（新旧对比） 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 (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部件 可扩展的页面样式框架 Hello HTML5 一个最基本的 jQuery Mobile 页面：!DOCTYPE html html head meta charset=utf-8 / titleHello HTML5/title meta name=viewport content=width=device-width, initial-scale=1 link rel=stylesheet href=/mobile/1.0b2/jquery.mobile-1.0b2.min.css / script type=text/javascript src=/jquery-1.6.2.min.js/script script type=text/javascript src=/mobile/1.0b2/jquery.mobile-1.0b2.min.js/script /head body div data-role=“page”!-- 从 1.0 Beta2 开始该元素可选-- div data-role=headerh1Hello HTML5/h1/div!-- /header -- div data-role=contentpPage content goes here./p/div!-- /content -- div data-role=footerh4copy;开源中国社区/h4/div!-- /footer -- /div!-- /