第2章 jQuery Mobile页面

14235第二章jQueryMobile页面HTML5移动Web开发14235jQueryMobile页面结构页面切换效果对话框页面主题化认识与下载jQueryMobile14235认识jQueryMobilejQueryMobilejQueryMobile是jQuery框架的一个组件。它给主流移动平台带来了jQuery核心库，是一个完整统一的jQuery移动UI框架。针对移动端浏览器的事件触摸事件-当用户触摸屏幕时触发滑动事件-当用户左右滑动时触发定位事件-当设备水平或垂直翻转时触发页面事件-当页面显示，隐藏，创建，加载或未加载时触发14235下载jQueryMobile引入jQueryMobile的方法•下载JQM，将*.js文件和*.css文件包含在web页面中。•直接引用CDN。linkrel=stylesheethref===创建移动设备模拟器电脑端Mac:XcodeWindows:Genymotion、夜神模拟器浏览器自带：Chrome、Opera真机手机和电脑需在同一个局域网14235jQueryMobile页面结构页面切换效果对话框页面主题化认识与下载jQueryMobile14235jQueryMobile页面结构!DOCTYPEhtmlhtmlheadmetacharset=utf-8/titleHelloHTML5/title!--title属性值不显示--metaname=“viewport”content=“width=device-width,initial-scale=1”!--限定页面宽度与设备宽度一致，页面加载时的放大倍数为1--linkrel=“stylesheet”href=“css/jquery.mobile-1.4.5.min.css”/scriptsrc=“js/jquery-2.2.2.js”/scriptscriptsrc=js/jquery.mobile-1.4.5.min.js/script/head引入jQueryMobile样式文件、jQuery脚本、jQueryMobile脚本14235jQueryMobile页面结构bodydivdata-role=“page”!--页--divdata-role=“header”!--标题--h1HelloHTML5/h1/divdivdata-role=“content”!--内容--pPagecontentgoeshere./p/divdivdata-role=“footer”!--页脚--h4©开源中国社区/h4/div/div/body/html14235jQueryMobile页面结构页面运行结果:data-role=headerdata-role=contentdata-role=footer1.上述三个元素并非必选。2.一个页面可以有多个date-role=“page”并使用id来进行标识以及导航。demo2_1.html14235jQueryMobile多容器页面结构在一个页面中，可以包含一个元素属性“data-role”值为“page”的容器，也允许包含多个，从而形成多容器页面结构。容器之间各自独立，拥有唯一的id号属性。页面加载时，以堆栈的方式同时加载；容器访问时，以内部链接“#”加对应“id”的方式进行设置。单击该链接时，jQueryMobile将在页面文档寻找对应id号的容器，实现容器间内容的访问。14235jQueryMobile多容器页面结构实例2-1jQueryMobile多容器间的切换功能说明:在页面中添加2个“data-role”属性为“page”的div元素，作为2个页面容器。用户在第一个容器中选择需要查看天气预报的日期，单击某天后，切换至第二个容器，显示所选日期的详细天气情况。pages.html14235jQueryMobile多页面切换采用AJAX请求的方式打开新页面。注入主页面的内容是以“page”为目标，“page”以外的内容将不会被注入主页面中；且必须确保外部加载页面URL地址的唯一性。在jQueryMobile中，可以采用开发多个页面并通过外部链接的方式，实现页面相互切换的效果。该页面将脱离整个jQueryMobile的主页面环境，以独自打开的页面效果在浏览器中显示。14235jQueryMobile外部页面链接设置外部页面链接的方法在a中增加rel属性，并将属性值设为externalahref=about.htmlrel=externalh4Onest/h4/apages.html14235jQueryMobile页面结构页面切换效果对话框页面主题化认识与下载jQueryMobile14235jQueryMobile页面切换效果浏览器支持•jQueryMobile提供了各种页面切换到下一个页面的效果。•为了实现页面切换效果，浏览器必须支持CSS33D切换。如：InternetExplorer10+、火狐、Chrome、Safari支持3D切换。Opera不支持。•在jQueryMobile的所有链接上，默认使用淡入淡出的效果（如果浏览器支持）。14235jQueryMobile页面切换效果浏览器支持页面切换效果的使用条件页面切换效果可被应用于任何使用data-transition属性的链接或表单提交：ahref=#anylinkdata-transition=slide切换到第二个页面/a14235jQueryMobile页面切换效果使用data-transition属性后页面切换效果页面切换描述fade默认。淡入到下一页flip从后向前翻转到下一页flow抛出当前页，进入下一页pop像弹出窗口一样进入下一页slide从右到左滑动到下一页slidefade从右到左滑动并淡入到下一页slideup从下到上滑动到下一页slidedown从上到下滑动到下一页turn翻到下一页none没有切换效果14235jQueryMobile页面切换效果data-direction属性所有效果支持后退行为。例如，如果想要页面从左向右滑动，而不是从右向左滑动，设置data-direction属性的值为“reverse”。ahref=#anylinkdata-transition=slidedata-direction=reverse切换到第二个页面/a14235jQueryMobile页面切换效果实例制作请参照下边两个效果图完成页面制作页面1效果图页面2效果图demo2_2.html14235jQueryMobile页面结构页面切换效果对话框页面主题化认识与下载jQueryMobile14235对话框对话框•在链接元素中添加“data-rel”属性，并将该属性值设置为“dialog”。•单击该链接时，打开的页面将以一个对话框的形式展示在浏览器中。单击对话框中的任意链接时，打开的对话框将自动关闭，并以“回退”的形式切换至上一页。ahref=about.htmdata-rel=dialogdata-transition=pop打开对话框/a14235jQueryMobile页面结构页面切换效果对话框页面主题化认识与下载jQueryMobile14235页面主题化jQueryMobile拥有一个丰富的主题化系统，可以控制如何显示一个页面的样式。共有五种不同的样式主题，从a到e-每种主题带有不同颜色的按钮、栏、内容块等。14235页面主题化jQueryMobile内置的页面主题14235页面主题化•建议把data-theme属性添加到data-role=“page”属性的div或者容器中，以确保背景色会在整个页面中应用。divdata-role=headerdata-theme=b/divdivdata-role=contentdata-theme=a/divdivdata-role=footerdata-theme=e/div14235添加新主题•可以自定义新主题。•通过编辑CSS文件（如已下载jQueryMobile）来添加或编辑新主题。•添加一段样式，用字母名（f-z）对类进行重命名，然后调整为喜欢的颜色和字体即可。•工具条添加类：ui-bar-(a-z)•文本内容添加类:ui-body-(a-z)•页面添加类：ui-page-theme-(a-z)14235添加新主题style.ui-bar-f{color:green;background-color:yellow;}/styledivdata-role=headerdata-theme=fh1应用f主题的标题/h1/div14235自定义主题index.html14235ThemeRoller谢谢ThankYou