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

jQueryMobile构建时髦的手机Web网站WinterLau 内容 手机网站 新旧对比 jQueryMobile简单介绍一个最简单的jQueryMobile网页使用jQueryMobile开发手机网站jQueryMobile支持的设备jQueryMobile的不足 jQueryMobile认知 jQueryMobile不是jQuery的移动版本jQueryMobile是一个jQuery的插件jQueryMobile的大小 最小化 jQuery1 6 2 90k jQueryMobileCSS 44k jQueryMobileJS 71K img 10k jQueryMobile的作用 可以轻松的帮助我们实现非常好看的 可跨设备的Web应用程序 JM开发的web应用像NativeAppJM包含Web应用中的各种常用部件对话框 表单 列表 按钮 工具条等使用Ajax加载页面 实现炫丽的页面切换效果 jQueryMobile关键特点 基于jQuery兼容主流的手机浏览器和桌面浏览器体积小 压缩后20K左右HTML5风格的配置页面自动初始化 通过data role属性自动对页面部件进行初始化触摸屏和鼠标事件支持丰富的UI部件可扩展的页面样式框架 编写JqueryMobile页面从HelloHTML5开始 HelloHTML5 一个最基本的jQueryMobile页面 HelloHTML5HelloHTML5Pagecontentgoeshere 开源中国社区 页面运行结果 data role header data role content data role footer 1 data role page 是可选的 从1 0b2开始 2 上述三个元素并非必须3 一个页面可以有多个date role page 并使用id来进行标识以及导航例如Second JM的链接处理方式 默认的链接行为 Ajax加载显示 loading 以下方式禁用Ajax加载链接ref external data ajax false target xxx 返回链接data rel back 其他链接mailto xxxx tel 15555555555wtai wp mc 15555555555dc 234 234 234 JM内置的6种页面主题 引入主题的方式 JM的工具栏 导航条 在jQueryMobile中 有两种标准类型的工具栏 Headerbar充当页面标题的作用 通常是mobilepage中的第一个元素 一般包含有一个页面标题和两个按钮 Footerbar通常是最后一个元素 相比于header在内容和功能上面更加自由 但是一般包含一些文字和按钮 导航条 不同风格的工具栏 JM的按钮 1 inline按钮 多个按钮放置一行 CancelSave 2 分组按钮YesNoMaybe JM的表格GridLayout jQueryMobile自带2 5列的表格 分别是 class ui grid a b c d示例 ABCABCABC JM的可折叠块 I maheaderI mthecollapsiblecontent BydefaultI mopenanddisplayedonthepage butyoucanclicktheheadertohideme 表单 JM表单 支持文本框的placeholder 属性通过data ajax false 禁用Ajax加载通过data theme让表单使用不同的主题可以使用HTML5新的类型 如email tel number等会自动根据输入的内容扩展输入框的高度 避免在手机上麻烦的滚动条 JM的列表ListView 列表广泛用于数据显示 导航 结果列表 数据项输入等 jQueryMobile包含了许多不同列表类型和格式化的例子来覆盖大部分的设计需求 AcuraAudiBMW JM的各种不同列表 基本列表嵌套列表编号列表只读列表拆分按钮列表列表分隔搜索过滤器气泡计数缩略图和图标 在线演示 jQueryMobile的初始化 mobileinit事件当jQueryMobile开始执行的时候 它会在document对象上触发一个mobileinit事件 document bind mobileinit function 这里是重写的代码 mobile foo bar mobile的配置选项 1 subPageUrlKey string default ui page url参数用来引用由插件生成的子页面 例如那些由嵌套的listview生成的子页面 例如 example html ui page subpageIdentifir 在 ui page 前的部分被jquerymobile框架用来向子页面所在的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 当可能的时候jQueryMobile会自动通过ajax处理链接点击以及表单提交 如果不行 urlhash监听将会停止 url也会像常规那样发出HTTP请求 ajaxLinksEnabled boolean default true 只要可行的时候 jQueryMobile就会自动通过ajax处理链接的点击 mobile的配置选项 2 ajaxFormsEnabled boolean default true 只要可行的时候 jQueryMobile就会自动通过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 JM事件 触摸 tap在快速完整的一次触摸后触发该事件 taphold在按住不放后触发该事件 接近一秒钟的时间 Triggersafteraheldcompletetouchevent closetoonesecond swipe在一秒钟的间隔内水平方向上拖动30px以上会触发该事件 水平方向上拖动要保持在20px以内 否则不会触发 swipeleft在左边方向移动时触发该事件 swiperight在右边方向移动时触发该事件 JM事件 方向改变 orientationchange当设备的方向改变时触发 把设备转到垂直或者水平方向 你绑定到此事件的回调函数可以有一个第二参数 该参数包含一个orientation属性 该属性可以设置为 portrait 或 landscape 这些值也被添加为HTML元素的classes 你也可以在你的css选择器里指定它们 要注意 当orientationChange不被支持时我们现目前将绑定resize事件作为替代 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 OperaMini5 6 WindowsPhone6 5 Symbian 3基本支持 C级 仅基本页面功能可行 黑莓4 x不支持SymbianS60 Meego Bada PalmWebOS3 0 JM的不足 大 慢 慢 谢谢大家