第15章　jQuery Mobile页面课件.ppt

《第15章　jQuery Mobile页面课件.ppt》由会员分享，可在线阅读，更多相关《第15章　jQuery Mobile页面课件.ppt（12页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、在上一章中已经了解了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个子容器，分别

2、在各子容器的标签中设置data-role属性值分别为header、content、footer，这样就形成了“标题”、“内容”、“结构”3部分组成的标准页面架构。多容器多容器jQuery Mobile页面页面在一个供jQuery Mobile使用的HTML页面中，可以包含一个元素data-role属性值为page的容器，也允许包含多个，从而形成多容器的jQuery Mobile页面结构。容器之间各自独立，并且每个容器需要拥有唯一的id名称。链接外部链接外部jQuery Mobile页面页面虽然在一个页面中，可以借助容器的框架实现多种页面的显示，但是，把全部代码写在一个页面中会延缓页面被加载的时

3、间，使代码冗余，且不利于功能的分工与维护的安全性。因此，在jQuery Mobile中，可以采用开发多个页面并通过外部链接的方式，实现页面相互切换的效果。实战练习实战练习链接外部链接外部jQuery Mobile页面页面在在jQuery Mobile页面中实现后退功能页面中实现后退功能在手机APP或移动网页中常常可以看到“返回”按钮，单击该按钮即可后退到上一页面中。实战练习实战练习在在jQuery Mobile页面中实现后退功能页面中实现后退功能 最终文件：光盘最终文件第15章15-1-3.html视频：光盘视频第15章15-1-3.swf 最终文件：光盘最终文件第15章15-1-4.html

4、视频：光盘视频第15章15-1-4.swf弹出对话框弹出对话框jquery Mobile中创建对话框的方式十分方便，只需要在指向页面的链接元素中添加data-rel属性，并设置该属性值为dialog。单击该链接时，打开的页面将以一个对话框的形式展示在浏览器中。单击对话框中的任意链接时，打开的对话框将自动关闭，并以“回退”的形式切换至上一页。实战练习实战练习实现弹出对话框实现弹出对话框 最终文件：光盘最终文件第15章15-1-5.html视频：光盘视频第15章15-1-5.swf通常情况下，移动终端设备的系统配置要低于PC终端，因此，在开发移动应用程序时，更要注意页面在移动终端浏览器中加载时的速

5、度。如果速度过慢，用户的体检将会大打折扣。为了加快页面移动终端访问的速度，在jQuery Mobile中，使用预加载和页面缓存都是十分有效的方法。当一个被链接的页面设置好预加载后，jQuery Mobile将在加载完成当前页面后自动在后台进行预加载设置的目标页面；另外，使用页面缓存的方法，可以将访问过的page容器都缓存到当前的页面文档中，下次再访问时，将可以直接从缓存中读取，而无需在重新加载页面。预加载预加载jQuery Mobile页面页面在开发移动应用程序时，对需要链接的页面进行预加载是非常有必要的。因为当一个链接的页面设置成预加载方式时，在当前页面加载完成之后，目标页面也被自动加载到当

6、前文档中，用户单击就可以马上打开，大大加快了页面访问的速度。页面缓存页面缓存在jQuery Mobile中，可以通过页面缓存的方式将访问过的历史内容写入页面文档的缓存中；当用户重新访问时，不需要重新加载，只要从缓存中读取就可以。实战练习实战练习在在jQuery Mobile页面中页面中实现预加载和缓存实现预加载和缓存 最终文件：光盘最终文件第15章15-2-2.html视频：光盘视频第15章15-2-2.swf头部栏由页面标题和按钮（最多两个）组成，其中的按钮可以使用“后退”按钮，也可以添加表单元素中的按钮，并可以通过设置相关属性控制头部按钮的相对位置。头部栏的基本结构头部栏的基本结构头部栏由

7、标题文字和左右两边的按钮构成，标题文字通常使用至标签进行标记，常用标签，无论取值是多少，在同一个移动应用项目中都要保持一致。标题文字左右两边可以分别放置一或两个按钮，用于标题中的导航操作。设置后退按钮的文字设置后退按钮的文字在头部栏标签中添加data-add-back-btn属性，可以在头部栏的左侧增加一个默认名为back的后退按钮。此外，还可以通过在头部栏标签中添加data-back-btn-text属性设置，从而设置后退按钮中显示的文字。添加按钮添加按钮在头部栏中，还可以手动编写代码添加按钮，通常使用标签来实现其他按钮的效果。由于头部栏空间的局限性，所添加按钮都是内联类型的，即按钮宽度只允

8、许放置图标与文字这两个部分。实战练习实战练习在头部栏中添加按钮在头部栏中添加按钮 最终文件：光盘最终文件第15章15-3-3.html视频：光盘视频第15章15-3-3.swf 设置按钮位置设置按钮位置在头部栏中，如果只放置一个链接按钮，不论位置在标题的左侧还是右侧，其最终都会显示在标题的左侧。如果想改变位置，需要添加新的类别属性ui-btn-left和ui-btn-right，ui-btn-left表示按钮居标题左侧（默认值），ui-btn-right表示按钮居标题右侧。 jQuery Mobile为导航栏提供了专门的组件，使用时只需要在标签中添加data-role=”navbar”属性设置

9、，即可将该Div设置为一个导航栏容器。在该容器内，通过标签设置导航栏的各子类导航按钮，每一行最多可以放置5个按钮，超出个数的按钮自动显示在下一行；另外，导航栏中的按钮可以引用系统的图标，也可以自定义图标。导航栏的基本结构导航栏的基本结构jQuery Mobile中的导航栏是一个被元素包裹的容器，在容器内，如果需要设置某个子类导航按钮为选中状态，只需在按钮的元素中添加ui-btn-active类别属性即可。实战练习实战练习创建头部导航栏创建头部导航栏 最终文件：光盘最终文件第15章15-4-1.html视频：光盘视频第15章15-4-1.swf 导航栏的图标导航栏的图标在导航栏中，各子类导航链接

10、按钮是通过元素来实现的，如果想要给导航栏中的子类链接按钮添加图标，只需要在对应的元素中添加data-icon属性，并在jQuery Mobile自带的系统图标集合中选择一个图标名作为该属性的值，图标的默认位置在按钮链接文字的上方。设置导航栏图标位置设置导航栏图标位置导航栏中的图标默认放置在按钮文字的上方，如果需要调整图标的位置，只需要在该导航栏容器元素中添加data-iconpos属性。该属性用于控制整个导航栏容器中图标的位置，默认值为top，表示图标在按钮文字的上方，此外，还可以选择left、right和bottom，分别表示图标在文字的左边、右边和下方。 尾部栏与头部栏的结构差不多，区别是

11、设置的data-role属性值不同。相对头部栏来说，尾部栏的代码更加简洁，在尾部栏中可以添加按钮组和各种表单元素，同时还可以对某个尾部栏进行定位处理。添加按钮添加按钮在jQuery Mobile页面的尾部栏中添加按钮时，为了减少各按钮的间距，通常需要在按钮的外围添加一个data-role属性值为controlgroup的容器，形成一个按钮组显示在尾部栏中。同时，在该容器中添加data-type属性，并将该属性的值设置为horizontal，表示容器中的按钮按水平顺序排列。 实战练习实战练习在尾部栏中添加按钮在尾部栏中添加按钮添加表单元素添加表单元素在底部栏中，可以添加按钮组，也可以向容器内增加

12、表单中的元素，如、等。为了确保表单元素在底部栏的正常显示，需要在底部栏容器中添加ui-bar类别属性，使新增加的表单元素间保持一定的间距，此外，将data-position属性值设置为inline，用于统一设定各表单元素的显示位置。实战练习实战练习在尾部栏中添加下拉列表在尾部栏中添加下拉列表 最终文件：光盘最终文件第15章15-5-1.html视频：光盘视频第15章15-5-1.swf最终文件：光盘最终文件第15章15-5-2.html视频：光盘视频第15章15-5-2.swfjQuery Mobile中提供了许多非常实用的工具与组件，例如多列的网格布局、折叠的面板控制等，使用这些工作和组件可

13、以帮助设计者快速对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

14、-6-1.html视频：光盘视频第15章15-6-1.swf可折叠区块可折叠区块在jQuery Mobile页面中除了可以创建出布局网格，还可以创建可折叠区块。在jQuery Mobile页面中创建可折叠区域需要通过以下3个步骤。（01）创建一个容器，将该容器的data-role属性值设置为collapsible，表示该容器是一个可折叠区块。 （02）在容器中添加一个标题标签，该标签以按钮的形式展示。按钮的左侧有一个“+”号，表示该标题可以展开。（03）在标题的下方放置需要折叠显示的内容，通常使用段落标签。当用户单击标题中的“+”号时，显示标签中的内容，标题左侧的“+”号变成“-”号；再次单击

15、时，隐藏标签中的内容，标签左侧的“-”号变为“+”号。实战练习实战练习在在jQuery Mobile页面中页面中创建可折叠区块创建可折叠区块 最终文件：光盘最终文件第15章15-6-2.html视频：光盘视频第15章15-6-2.swf可折叠区块的嵌套可折叠区块的嵌套在jQuery Mobile页面中允许对可折叠区块进行嵌套显示，即在一个折叠区块的内容中再添加一个折叠区块，依此类推。但建议这种嵌套最多不要超过3层，否则用户体验和页面性能都比较差。可折叠区块组可折叠区块组可折叠区块不但可以嵌套，还可以形成可折叠区块组。在可折叠区块组中可以包含多个可折叠区块，在同一时间内，可折叠区块组中只有一个折

16、叠区块是展开的，当展开组中一个可折叠区块时，其中的其他可折叠区块将自动关闭。实现可折叠区块组的方法是将多个折叠区块放置在一个容器中，并且在该标签中添加data-role=collapsible-set属性设置。实战练习实战练习在在jQuery Mobile页面页面中创建可折叠区块组中创建可折叠区块组 最终文件：光盘最终文件第15章15-6-4.html视频：光盘视频第15章15-6-4.swf在本章中重点向读者介绍了有关jQuery Mobile页面的相关知识，一是jQuery Mobile工具栏，包括头部栏、导航栏和尾部栏的创建和使用方法；二是对jQuery Mobile页面正文部分进行格式化处理的方法，包括网格布局、可折叠区块等内容。通过对本章内容的学习，读者需要能够熟悉jQuery Mobile页面的基本架构以及各部分内容的设置和处理方法。