jQueryMobile综述.ppt

五. jQuery Mobile?可折叠块  可折叠集合是将可折叠块组合在一起（就像手风琴一样）。当一个新的块被展开时，所有其他的块都会被折叠起来。 创建若干个可折叠的内容块，然后把可折叠内容块用带有 data-role=collapsible-set 的新容器包围起来： 五. jQuery Mobile?可折叠块  实例 div?data-role=collapsible-setdiv data-role=collapsibleh1点击我 - 我可以折叠！/h1p我是被展开的内容。/p/divdiv data-role=collapsibleh1点击我 - 我可以折叠!/h1p我是被展开的内容。/p/div/div  五. jQuery Mobile?可折叠块  效果图如下，请制作 (实例文件夹中的26.html) ： 点击前页面效果 第一项点击后页面效果 五. jQuery Mobile?可折叠块  通过 data-inset 属性取消圆角 如何取消可折叠块上的圆角。(实例文件夹中的27.html) 通过 data-mini 属性迷你化可折叠块如何让可折叠块更小。(实例文件夹中的28.html） 通过 data-collapsed-icon 和 data-expanded-icon 改变图标如何改变可折叠块的图标（默认是 + 和 -）。(实例文件夹中的29.html） 六. jQuery Mobile?网格  1.jQuery Mobile 布局网格 2.自定义网格 3.多行  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 布局网格  下面是三列布局。 效果图如下，请制作 (实例文件夹中的30.html) ：  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.自定义网格  下面是三列布局。 效果图如下，请制作 (实例文件夹中的31.html) ：  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-bloc