第15章-jQuery-Mobile页面.ppt

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,15.1,jQuery Mobile页面结构,在上一章中已经了解了,jQuery Mobile,页面的工作原理和执行流程，,jQuery Mobile,页面的许多功能效果都需要借助于,HTML 5,的新增标签和属性，因此，所创建的,HTML,页面必须符合,HTML 5,文档规范，并且在文档的,与,标签之间需要依次加载,jQuery Mobile,的,CSS,样式表文件、,jQuery,基本框架文件和,jQuery Mobile,插件文件。,jQuery Mobile,页面基本架构,jQuery Mobile,页面拥有一个基本的架构，就是在,HTML,页面中通过将在,标签中添加,data-role,属性，设置该属性的值为,page,，使该,Div,形成一个容器，而在该容器中包含,3,个子容器，分别在各子容器的,标签中设置,data-role,属性值分别为,header,、,content,、,footer,，这样就形成了“标题”、“内容”、“结构”,3,部分组成的标准页面,架构。,多容器,jQuery Mobile,页面,在一个供,jQuery Mobile,使用的,HTML,页面中，可以包含一个元素,data-role,属性值为,page,的容器，也允许包含多个，从而形成多容器的,jQuery Mobile,页面结构。容器之间各自独立，并且每个容器需要拥有唯一的,id,名称。,链接外部,jQuery Mobile,页面,虽然在一个页面中，可以借助容器的框架实现多种页面的显示，但是，把全部代码写在一个页面中会延缓页面被加载的时间，使代码冗余，且不利于功能的分工与维护的安全性。因此，在,jQuery Mobile中，可以采用开发多个页面并通过外部链接的方式，实现页面相互切换的,效果。,实战练习,链接外部,jQuery Mobile,页面,在,jQuery Mobile,页面中实现后退功能,在手机,APP,或移动网页中常常可以看到“返回”按钮，单击该按钮即可后退到上一页面中。,实战练习,在,jQuery Mobile,页面中实现后退功能,最终文件：光盘,最终文件,第,15,章,15-1-3.html,视频：光盘,视频,第,15,章,15-1-3.swf,最终文件：光盘,最终文件,第,15,章,15-1-4.html,视频：光盘,视频,第,15,章,15-1-4.swf,弹出对话框,jquery Mobile,中创建对话框的方式十分方便，只需要在指向页面的链接元素中添加,data-rel,属性，并设置该属性值为,dialog,。单击该链接时，打开的页面将以一个对话框的形式展示在浏览器中。单击对话框中的任意链接时，打开的对话框将自动关闭，并以“回退”的形式切换至上一页。,实战练习,实现弹出,对话框,最终文件：光盘,最终文件,第,15,章,15-1-5.html,视频：光盘,视频,第,15,章,15-1-5.swf,15.2,预加载和缓存,jQuery Mobile,页面,通常情况下，移动终端设备的系统配置要低于,PC,终端，因此，在开发移动应用程序时，更要注意页面在移动终端浏览器中加载时的速度如果速度过慢，用户的体检将会大打折扣。为了加快页面移动终端访问的速度，在,jQuery Mobile,中，使用预加载和页面缓存都是十分有效的方法。当一个被链接的页面设置好预加载后，,jQuery Mobile,将在加载完成当前页面后自动在后台进行预加载设置的目标页面；另外，使用页面缓存的方法，可以将访问过的,page,容器都缓存到当前的页面文档中，下次再访问时，将可以直接从缓存中读取，而无需在重新加载页面。,预加载,jQuery Mobile,页面,在开发移动应用程序时，对需要链接的页面进行预加载是非常有必要的。因为当一个链接的页面设置成预加载方式时，在当前页面加载完成之后，目标页面也被自动加载到当前文档中，用户单击就可以马上打开，大大加快了页面访问的速度,。,页面缓存,在,jQuery Mobile,中，可以通过页面缓存的方式将访问过的历史内容写入页面文档的缓存中；当用户重新访问时，不需要重新加载，只要从缓存中读取就可以,。,实战练习,在,jQuery Mobile,页面中实现预加载和,缓存,最终文件：光盘,最终文件,第,15,章,15-2-2.html,视频：光盘,视频,第,15,章,15-2-2.swf,15.3,jQuery Mobile,页面头部栏,头部栏由页面标题和按钮（最多两个）组成，其中的按钮可以使用“后退”按钮，也可以添加表单元素中的按钮，并可以通过设置相关属性控制头部按钮的相对位置。,头部栏的基本结构,头部栏由标题文字和左右两边的按钮构成，标题文字通常使用,至,标签进行标记，常用,标签，无论取值是多少，在同一个移动应用项目中都要保持一致。标题文字左右两边可以分别放置一或两个按钮，用于标题中的导航,操作。,设置后退按钮的文字,在头部栏标签中添加,data-add-back-btn,属性，可以在头部栏的左侧增加一个默认名为,back,的后退按钮。此外，还可以通过在头部栏标签中添加,data-back-btn-text,属性设置，从而设置后退按钮中显示的,文字。,添加按钮,在头部栏中，还可以手动编写代码添加按钮，通常使用,标签来实现其他按钮的效果。由于头部栏空间的局限性，所添加按钮都是内联类型的，即按钮宽度只允许放置图标与文字这两个部分,。,实战练习,在头部栏中添加按钮,最终文件：光盘,最终文件,第,15,章,15-3-3.html,视频：光盘,视频,第,15,章,15-3-3.swf,设置按钮位置,在头部栏中，如果只放置一个链接按钮，不论位置在标题的左侧还是右侧，其最终都会显示在标题的左侧。如果想改变位置，需要添加新的类别属性,ui-btn-left,和,ui-btn-right,，,ui-btn-left,表示按钮居标题左侧（默认值），,ui-btn-right,表示按钮居标题,右侧。,15.4,jQuery Mobile,页面导航栏,jQuery Mobile,为导航栏提供了专门的组件，使用时只需要在,标签中添加,data-role=”navbar”,属性设置，即可将该,Div,设置为一个导航栏容器。在该容器内，通过,标签设置导航栏的各子类导航按钮，每一行最多可以放置,5,个按钮，超出个数的按钮自动显示在下一行；另外，导航栏中的按钮可以引用系统的图标，也可以自定义图标。,导航栏的基本结构,jQuery Mobile,中的导航栏是一个被,元素包裹的容器,，在,容器内，如果需要设置某个子类导航按钮为选中状态，只需在按钮的元素中添加,ui-btn-active,类别属性即可,。,实战练习,创建头部导航栏,最终文件：光盘,最终文件,第,15,章,15-4-1.html,视频：光盘,视频,第,15,章,15-4-1.swf,导航栏的图标,在导航栏中，各子类导航链接按钮是通过,元素来实现的，如果想要给导航栏中的子类链接按钮添加图标，只需要在对应的,元素中添加,data-icon,属性，并在,jQuery Mobile,自带的系统图标集合中选择一个图标名作为该属性的值，图标的默认位置在按钮链接文字的上方。,设置导航栏图标位置,导航栏中的图标默认放置在按钮文字的上方，如果需要调整图标的位置，只需要在该导航栏容器元素中添加,data-iconpos,属性。该属性用于控制整个导航栏容器中图标的位置，默认值为,top,，表示图标在按钮文字的上方，此外，还可以选择,left,、,right,和,bottom,，分别表示图标在文字的左边、右边和下方,。,15.5,jQuery Mobile,页面尾部栏,尾部栏与头部栏的结构差不多，区别是设置的,data-role,属性值不同。相对头部栏来说，尾部栏的代码更加简洁，在尾部栏中可以添加按钮组和各种表单元素，同时还可以对某个尾部栏进行定位处理。,添加按钮,在,jQuery Mobile,页面的尾部栏中添加按钮时，为了减少各按钮的间距，通常需要在按钮的外围添加一个,data-role,属性值为,controlgroup,的容器，形成一个按钮组显示在尾部栏中。同时，在该容器中添加,data-type,属性，并将该属性的值设置为,horizontal,，表示容器中的按钮按水平,顺序排列。,实战练习,在尾部栏中添加按钮,添加表单元素,在底部栏中，可以添加按钮组，也可以向容器内增加表单中的元素，如,、,等。为了确保表单元素在底部栏的正常显示，需要在底部栏容器中添加,ui-bar,类别属性，使新增加的表单元素间保持一定的间距，此外，将,data-position,属性值设置为,inline,，用于统一设定各表单元素的显示,位置。,实战练习,在尾部栏中添加下拉列表,最终文件：光盘,最终文件,第,15,章,15-5-1.html,视频：光盘,视频,第,15,章,15-5-1.swf,最终文件：光盘,最终文件,第,15,章,15-5-2.html,视频：光盘,视频,第,15,章,15-5-2.swf,15.6,结构化,jQuery Mobile,页面内容,jQuery Mobile,中提供了许多非常实用的工具与组件，例如多列的网格布局、折叠的面板控制等，使用这些工作和组件可以帮助设计者快速对,jQuery Mobile,页面的正文区域进行格式化处理。,jQuery Mobile,布局网格,使用,jQuery Mobile,中提供的名为,ui-grid,的,CSS,样式可以实现,jQuery Mobile,页面中内容的网格布局。该,CSS,样式有,4,种预设的布局设置：,ui-grid-a,、,ui-grid-b,、,ui-grid-c,和,ui-grid-d,，分别对应两列、三列、四列和五列的网格布局形式，可以最大范围满足页面多列布局的需求,。,实战练习,在,jQuery Mobile,页面中创建布局,网格,两列网格布局,三列网格布局,四列网格布局,五列网格布局,最终文件：光盘,最终文件,第,15,章,15-6-1.html,视频：光盘,视频,第,15,章,15-6-1.swf,可折叠区块,在,jQuery Mobile,页面中除了可以创建出布局网格，还可以创建可折叠区块。在,jQuery Mobile,页面中创建可折叠区域需要通过以下,3,个步骤。,（,01,）创建一个,容器，将该容器的,data-role,属性值设置为,collapsible,，表示该容器是一个可折叠区块。,（,02,）在容器中添加一个,标题标签，该标签以按钮的形式展示。按钮的左侧有一个“,+,”号，表示该标题可以展开。,（,03,）在标题的下方放置需要折叠显示的内容，通常使用,段落标签。当用户单击标题中的“,+,”号时，显示,标签中的内容，标题左侧的“,+,”号变成“,-,”号；再次单击时，隐藏,标签中的内容，标签左侧的“,-,”号变为“,+,”号。,实战练习,在,jQuery Mobile,页面中创建可折叠,区块,最终文件：光盘,最终文件,第,15,章,15-6-2.html,视频：光盘,视频,第,15,章,15-6-2.swf,可折叠区块的,嵌套,在,jQuery Mobile,页面中允许对可折叠区块进行嵌套显示，即在一个折叠区块的内容中再添加一个折叠区块，依此类推。但建议这种嵌套最多不要超过,3,层，否则用户体验和页面性能都比,较差。,可折叠区块组,可折叠区块不但可以嵌套，还可以形成可折叠区块组。在可折叠区块组中可以包含多个可折叠区块，在同一时间内，可折叠区块组中只有一个折叠区块是展开的，当展开组中一个可折叠区块时，其中的其他可折叠区块将自动关闭,。,实现可折叠区块组的方法是将多个折叠区块放置在一个,容器中，并且在该,标签中添加,data-role=collapsible-set,属性设置。,实战练习,在,jQuery Mobile,页面中创建可折叠区块组,最终文件：光盘,最终文件,第,15,章,15-6-4.html,视频：光盘,视频,第,15,章,15-6-4.swf,15.7,本章小结,在本章中重点向读者介绍了有关,jQuery Mobile,页面的相关知识，一是,jQuery Mobile,工具栏，包括头部栏、导航栏和尾部栏的创建和使用方法；二是对,jQuery Mobile,页面正文部分进行格式化处理的方法，包括网格布局、可折叠区块等内容。通过对本章内容的学习，读者需要能够熟悉,jQuery Mobile,页面的基本架构以及各部分内容的设置和处理方法。,