第6章使用表格和CSS渐变重点分析.pptVIP

第6章使用表格和CSS渐变来格式化内容 当内容需要以一种灵活的方式编组到区域时，移动应用程序通常会为之应用表格。在需要该行为的设计中，jQuery Mobile的自适应表格就是一种有效的解决方案。在本章中，我们会学习jQuery Mobile表格组件的基本知识，并通过几个示例来讲解如何在表格中样式化图标、图形和文本。我们还会创建可折叠的内容块，并讨论了它与内嵌的页面结构相比较时，所具有的优势。我们使用CSS变来修饰一下我们的设计，并讨论CSS渐变在和渐进式增强方面所提供的优势。 6.1表格布局 jQuery Mobile的表格是可配置的。它可以支持2——5列的表格布局。从HTML的角度来看，表格是使用CSS属性配置得罪div元素。表格相当灵活，而且会占据显示屏幕的整个宽度。表格不包括边界、内间距、边距，这样就不会对其内部包含的元素的样式形成干扰。在我们查看表格示例之前，首先来讲解表格模板。 6.1.1表格模板 在创建多列表格时，表格模板将是一个非常有用的参考（见程序清单6-1） 在创建表格时，需要创建具有两个或更多个内层块的外层表格容器。 1.表格布局：表格容器需要CSS属性ui-grid-*来配置表格中列的数量。例如，要创建一个两列的表格，我们需要将表格CSS属性设置为ui-grid-a 2.块：块包含在表格内。块需要CSS属性ui-block-*来识别其列的位置。例如，如果我们有一个两列的表格，则第一个块会用CSS属性ui-block-a来样式化，而第二个块会用CSS属性ui-block-b来样式化。 6.1.2两列的表格 一个两列的表格（50%，50%）示例，相关代码清单如下： 外层表格使用CSS表格属性ui-grid-a进行配置。接下来，我们添加两个内层块。第一个块被分配了一个CSS属性ui-block-a，第二个块被分配了一个CSS属性ui-block-b。如图6-1所示，列是等间距、无边界的，而且每个块内的文本在必要时会换行显示。 另外，jQuery Mobile内的表格相当灵活，会根据不同的屏幕显示尺寸以自适应的方式进行呈现。 6.1.3带有CSS增强的三列表格 一个三列表格（33%，33%，33%）的示例，其相关代码见程序清单 它与前面看到的两列表格非常相似，但是它配置了CSS属性以支持三个列，而且我们为第三列添加了一个额外的块。我们还使用可主题化的类对块进行了样式化。在本例中，我们添加了ui-bar以应用CSS内间距，还添加了ui-bar-e以便为“e”工具栏主题调色板应用背景渐变和字体样式。你可以使用范围为a——e内的任何工具栏主题来样式化（style=“height:100px”）。从视觉上看，这些增强都是使用线性的背景渐变来样式化表格，现在块与块之间使用边界进行分隔。 6.1.4带有app图标的四列表格 一个四列表格（25%，25%，25%，25%）的示例，其相关代码 它与三列表格相似，只不过为该表格配置了CSS属性（ui-grid-c），以支持4个列。而且我们为第四列增加了一个额外的块。此外，出于平衡和一致性考虑，我们将app图标放置在表格的中央位置（style=“text-align：center；”）。从视觉上看，这个表格具有个大小相等的app图标，它与应用程序springboard非常相似。 6.1.5带有emoji图标的五列表格 一个五列表格（20%，20%，20%，20%，20%）的示例如图示，其相关代码程序如程序清单6-5 该表格与前面讲解的四列表格非常相似，只不过为该表格配置了CSS属性（ui-grid-d），以支持5个列，而且我们为第五列（ui-block-e）添加了一个额外的块。每一个块都包含独特的Emoji图标。 注意：Emoji图标能够替代图象，而且它无需HTTP请求，其负载只有少量的文本字符，因此性能出色，但Emoji图标当前只能支持iOS系统。 6.1.6多行表格 目前为止，我们看到的表格都只有一行。为了添加其他行，只需为其简单地重复第一行的块模式即可。我们最终生成的是一个三行五列的表格。列的宽度都是相等的，而且你在块组件上手动调整行的高度 6.1.7不规则的表格 目前为止，我们看到的每一个表格，列的宽度都是相等的，这是因为jQuery Mobile在默认情况下会平均地划分所有的列。但是，如果需要自定义列的尺寸，可以在CSS中调整其宽度。例如，通过设置每一个块的自定义宽度，我们可以将两列表格的宽度修改为一个25%，75%的表格。另外表格可以进行修改，以支持各种尺寸。 6.1.8springboard Springboard是一个可以应用我们的表格布局的理想物件。在下面的例子中，我们会看到两种类型的springboard。首先，我们会看到使用app图标进行样式化的