使用表格和CSS渐变来格式化内容全解.ppt

4. jQuery Mobile?可折叠块  效果图如下，请制作 ： 点击前页面效果 第一项点击后页面效果 4. jQuery Mobile?可折叠块  通过 data-inset 属性取消圆角 如何取消可折叠块上的圆角。 通过 data-mini 属性迷你化可折叠块如何让可折叠块更小。 通过 data-collapsed-icon 和 data-expanded-icon 改变图标如何改变可折叠块的图标（默认是 + 和 -）。 本讲总结 网格布局的方式？ 如何制作可折叠块？ * * * * 使用表格和CSS渐变来格式化内容 （第十讲 ) 知识回顾 如何制作内置列表？ 如何制作列表分割线？ 如何制作计数泡？ 如何制作拆分按钮列表？ 教学内容  jQuery Mobile 布局网格 自定义网格 多行 可折叠块  重点、难点 重点 jQuery Mobile 布局网格 自定义网格 多行 可折叠块 难点 jQuery Mobile 布局网格 自定义网格 多行 可折叠块 1.jQuery Mobile 布局网格  Query Mobile 提供了一套基于 CSS 的分列布局。然而，在移动设备上，由于考虑手机的屏幕宽度狭窄，一般不建议使用分栏分列布局。 但有时您想要将较小的元素（如按钮或导航标签）并排地排列在一起，就像是在一个表格中一样。这种情况下，推荐使用分列布局。 网格中的列是等宽的（合计是 100%），没有边框、背景、margin 或 padding。  1.jQuery Mobile 布局网格  这里有四种布局网格可供使用： 在列容器内，子元素拥有的 class 为 ui-block-a|b|c|d|e 取决于列数。列会浮动并排。?实例 1:class 为 ui-grid-a（两列布局），您必须指定 ui-block-a 和 ui-block-b 的两个子元素。?实例 2:class 为 ui-grid-b（三列布局），则必须添加 ui-block-a、ui-block-b 和 ui-block-c 的 三个子元素。 网格类 列 列宽 对应 实例 ui-grid-a 2 50% / 50% ui-block-a|b 尝试一下 ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c 尝试一下 ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d 尝试一下 ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e 尝试一下  1.jQuery Mobile 布局网格  下面是三列布局。 效果图如下，请制作 ：  2.自定义网格  通过使用CSS，您可以自定义列块，如： style.ui-block-a,?.ui-block-b,?.ui-block-c?{background-color: lightgray;border: 1px solid black;height: 100px;font-weight: bold;text-align: center;padding: 30px;}/style  2.自定义网格  下面是三列布局。 效果图如下，请制作 ：  2.自定义网格  您也可以通过使用内嵌样式来自定义块： div class=ui-block-a style=border: 1px solid black;spanText../span/div  3.多行  在列中也可以有多个行。 注意：ui-block-a-class 总是创建一个新行。 实例如下： div class=ui-grid-bdiv class=ui-block-aspanSome Text/span/divdiv class=ui-block-bspanSome Text/span/divdiv class=ui-block-cspanSome Text/span/divdiv class=ui-block-aspanSome Text/span/divdiv class=ui-block-bspanSome Text/span/divdiv class=ui-block-aspanSome Text/span/div/div  3.多行  效果图如下，请制作 ：  4.jQuery Mobile?可折叠块  可折叠块允许您隐藏或显示内容 - 对