jQueryMobile.ppt

* 高级前端技术 PHP课程第二季 第十一讲 Jquery Mobile jQuery Mobile 简介 jQuery Mobile 发展 jQuery Mobile 特点 使用模拟器 jQuery Mobile 组件 定制 JQM 主题 生成界面工具 Jquery Mobile 简介 jQuery Mobile 是jQuery 的移动开发扩展。 jQuery Mobile 继承了jQuery的兼容性优势，目前所开发的应用兼容于所有主要的移动终端浏览器。 无论页面数据的调用还是页面间的切换，都是采用AJAX进行驱动的，从而保持了动画转换页面的干净与优雅。 jQuery Mobile提供了一些自定义的事件，用来侦测用户的移动触摸动作，如tap（单击）、tap-and-hold（单击并按住）、swipe（滑动）等事件，极大提高了代码开发的效率。 Jquery Mobile 发展 迪斯尼 : / 宜家家具: / 斯坦福大学： / 使用Jquery Mobile 的网站: Jquery Mobile 特点 基于 jQuery 兼容主流的手机浏览器和桌面浏览器 体积小 HTML5风格的配置 页面自动初始化，通过 data-role 属性自动对页面部件进行初始化 触摸屏和鼠标事件支持 模拟器的使用 windows Phone emulator Opera Mobile emulator Mobilizer (需要安装Adobe Air ) 线上模拟器 使用 jQuery Mobile 引入相关文件： 下载 Jquery Moible ： /mobile/1.3.1/jquery.mobile-1.3.1.zip JQM 的网页构架 使用 data-role 配置元素类型 (角色) 为了无缝页面切换，网页中可以定一多个页面（page），每一个网页由至少一个页面元素 ( page ) 组成。 每个页面(page)之间可以通过超链接#[pageid]进行快速切换。 设置 data-title 属性用于设置页面的标题. JQM 的页面（page）构架 在一个页面(page)中用data-role=header部分表示页面头部,data-role=content表示内容部分，data-role=footer 表示页面底部。 JQM 固定工具栏（Fixed toolbars） 头部栏和尾部栏在文档中的位置，页面被滚动出屏幕后，你可以通过点击屏幕，使他们重新出现。再次点击或者滚动屏幕重新出现在文档流中（在顶部或底部）。 使用此效果。给容器加上 data-position=fixed 属性。 JQM 的页面切换 其中href指定page/dialog 的id，data-transition指定页面切换动画，可选值如下： slidefade、 slide 、 slideup 、 slidedown 、 pop 、 fade 、 flip、 turn、 flow 内部页面切换 外部页面切换 切换外部页面：a href=help.html帮助/a [需要服务器支持] 预加载外部页面：a href=help.html data-prefetch=true帮助/a 代码实现预加载：  $.mobile.loadPage(help.html,{showLoadMsg:false}); 不使用Ajax加载：a href=help.html data-ajax=false 帮助/a JQM 的其他链接 返回上一页: 弹出窗体: 邮件链接: 电话链接: 短信连接： JQM 的按钮（Button） 定义按钮： 设置按钮在一行使用属性 ： data-inline=true，使用小按钮设置属性： data-mini=true ，设置图标： data-icon=arrow-l 图标的显示位置：data-iconpos=left,设置颜色主题：data-theme=b. JQM 的对话框（dialog） 对话框(dialog) 和页面类似。有关闭按钮，结构也可划分头部、内容、底部、需要将 data-role类型为 dialog。 JQM 的对话框（dialog） 设置关闭按钮右对齐： data-close-btn=right 设置背景主题：data-overlay-theme=e 设置没有关闭按钮：data-close-btn=none. JQM