【JQuery Mobile】内容格式化

　　因为屏幕通常都比较窄，所以使用多栏布局的方法在移动设备上不是推荐的方法。但是总有时候你会想要把一些小的元素并排放置（比如按钮，或导航标签)，Jquery Mobile框架提供了一种简单的方法构建基于css的分栏布局，叫做ui-grid，Jquery Mobile提供了两种预设的配置布局：两栏布局（class 含有 ui-grid-a）和三栏布局 （class 含有 ui-grid-b）—几乎可满足需要栏布局的任何情况。网格是100%宽的，不可见（没有背景或边框），也没有padding和margin，所以它们不会影响内部元素的样式。　　

　　要构建两栏的布局（50/50%），先构建一个父容器，添加一个class名字为：ui-grid-a,内部设置两个字容器，分别给第一个子容器添加class：ui-block-a，第二个子容器添加class：ui-block-b。

如：

<div class="ui-grid-a">
　 <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
　 <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div><!-- /grid-a -->

也可以在每个网格的标签内增加style="height:120px"的属性来设置高度，增加ui-bar的class给默认的bar padding，增加ui-bar-e的class应用背景渐变和工具栏的主题e的字体样式。

　　另一种布局的方式是三栏布局，给父容器添加”class="ui-grid-b"，然后分别给三个字容器添?加 class="ui-block-a"，“class="ui-block-b"，”class="ui-block-c"。

如：

<div class="ui-grid-b">
　 <div class="ui-block-a">Block A</div>
　 <div class="ui-block-b">Block B</div>
　 <div class="ui-block-c">Block C</div>
</div><!-- /grid-a -->

就会生成一个 33/33/33% 的分栏布局，以此类推：如果是4栏布局，则给父容器添加class="ui-grid-c"（2栏为a，3栏为b, 4栏为c, 5栏为d。。。。），子容器分别添加class="ui-block-a"，”class="ui-block-b" “class="ui-block-c"。。。。

　　网格化布局也适用于多栏布局的方式，比如，如果你指定了一列布局的父容器，里面有9个子容器，则会包裹为3行，每行3个。可以给每行的第一个容器设置为class=ui-block-a来清除浮动，这样9个子容器的class应为：class=ui-block-(a,b,c,a,b,c,a,b,c)重复。　　

　　要创建一个可折叠的区块，先创建一个容器，然后给容器添加data-role="collapsible"属性

容器内直接的标题（h1-h6)子结点，Jquery Mobile会将之表现为可点击的按钮，并在左侧添加一个“+"按钮，表示是可以展开的,在头部后面你可以添加任何想要折叠的html标记。框架会自动把这些标记包裹在一个容器里用以折叠或显示。

如：

<div data-role="collapsible">
　 <h3>I'm a header</h3>
　 <p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
</div>

默认情况下，可折叠容器是展开的，可以通过通过点击头部收缩。给折叠的容器添加data-collapsed="true"的属性，可以设为默认收缩。

　　通过给父容器添加data-role="collapsible-set"属性然后每一个子容器data-role="collapsible"属性，可以让容器展开时，其他容器被折叠的效果，类似手风琴组件。

　　页面的主题内容区域（标有 data-role="content"属性的容器），应该通过给data-role="page"属性的容器增加data-theme属性来确保不管页面多高背景色都能够在整个页面都应用到（如果你只为data-role="content"容器添加了data-theme属性，则背景色会在内容结束部分停止，可能会造成固定尾部栏和内容之间产生留白 。

　　给可折叠区块的容器添加data-theme属性，就可以给折叠块的标题设置主题。图标和折叠的内容目前还不能通过data-theme属性设置，但是可以通过自定义的css设置。

如：<div data-role="collapsible" data-collapsed="true" data-theme="e">