使用jQueryMobile建设时髦的手机Web应用.pptVIP

自由·开放·分享 自由·开放·分享 自由·开放·分享 自由·开放·分享 自由·开放·分享 jQuery Mobile 构建时髦的手机 Web 网站 Winter Lau my.oschina/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部件 可扩展的页面样式框架 编写 Jquery Mobile 页面 从 Hello HTML5 开始 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=code.jquery/mobile/1.0b2/jqueryle-1.0b2.min.css / script type=text/javascript src=code.jquery/jquery-1.6.2.min.js/script script type=text/javascript src=code.jquery/mobile/1.0b2/jqueryle-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!-- / /body /html 页面运行结果 data-role=header data-role=content data-role=footer 1. data-role=“page” 是可选的(从1.0b2开始)2. 上述三个元素并非必须3. 一个页面可以有多个date-role=“page” 并使用 id 来进行标识以及导航 例如 a href=“#second_page”Second/a JM 的链接处理方式 默认的链接行为：Ajax 加载显示(loading…) 以下方式禁用 Ajax 加载链接ref=‘external’data-ajax=‘false’target=‘xxx’ 返回链接data-rel=‘back’ 其他链接mailto:xxxxxxxxtelwtai://wp/mcdc:234*234*234 JM 内置的6种页面主题 引入主题的方式：div data-role=‘page’ data-theme=‘b’ JM 的工具栏/导航条 在 jQuery Mobile 中, 有两种标准类型的工具栏： Header bar 充当页面标题的作用, 通常是 m