jQuery Mobile组件:内容格式-jquery插件

基本的HTML样式

在移动设备上使用多列布局并不是我们推荐的，但是有时你可能会需要把一些小的元素比如按钮导航tab等排成一行。

jQuery Mobile框架提供了一个简单的方法来构建基于CSS的栅格布局，我们约定为ui-grid。

有两个预设的配置布局 — 两列布局(class 含有 ui-grid-a)和三列布局 (class 含有 ui-grid-b)—几乎可满足在任何情况下使用的要求。网格宽度是100%的，且不可见(没有背景或边框)，也没有padding和margin，所以它们不应该影响它们内嵌元素的样式。

两列网格

要创建一个两列(50/50%)布局，首先需要一个容器(class="ui-grid-a")，然后添加两个子容器(分别添加 ui-block-a和 ui-block-b的 class )：

<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 -->

上述标记产生下列内容的布局：

正如您在上面看到的，预设网格块没有任何样式，他们只显示内容。

网格class可以应用于任何容器。在下面的例子中我们为fieldset添加了 ui-grid-a并为两个button容器应用了 ui-block ：

<fieldset class="ui-grid-a"> 
    <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div> 
    <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>      
</fieldset>

此外，网格块可以采用主题化系统中的样式 — 通过增加一个高度和颜色调板，就可以实现这种风格的外观：

三列网格

另一种网格布局配置在父级容器使用 class=ui-grid-b ，而三个子级容器使用ui-block-a/b/c ，以创建三列的布局(33/33/33%)。

<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 -->

以下是三列网格示例：

三列网格(带按钮)：

四列网格

四列网格使用 class=ui-grid-c来创建(25/25/25/25% )。

五列网格

四列网格使用 class=ui-grid-d来创建(20/20/20/20/20% )。

多行网格

网格被设计用来折断多行的内容。举例来说，如果你指定一个三列网格中包含九个子块，他们会折断成三行三列的布局。该布局需要为 class=ui-block-子块使用一个重复的序列(a, b, c, a, b, c 等)来创建：

#p#

栅格布局（Layout grids (columns)）

在移动设备上使用多列布局并不是我们推荐的，但是有时你可能会需要把一些小的元素比如按钮导航tab等排成一行。

jQuery Mobile框架提供了一个简单的方法来构建基于CSS的栅格布局，我们约定为ui-grid。

两列网格

要创建一个两列(50/50%)布局，首先需要一个容器(class="ui-grid-a")，然后添加两个子容器(分别添加 ui-block-a和 ui-block-b的 class )：

<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 -->

上述标记产生下列内容的布局：

正如您在上面看到的，预设网格块没有任何样式，他们只显示内容。

网格class可以应用于任何容器。在下面的例子中我们为fieldset添加了 ui-grid-a并为两个button容器应用了 ui-block ：

<fieldset class="ui-grid-a"> 
    <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div> 
    <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>      
</fieldset>

此外，网格块可以采用主题化系统中的样式 — 通过增加一个高度和颜色调板，就可以实现这种风格的外观：

三列网格

另一种网格布局配置在父级容器使用 class=ui-grid-b ，而三个子级容器使用ui-block-a/b/c ，以创建三列的布局(33/33/33%)。

<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 -->

以下是三列网格示例：

三列网格(带按钮)：

四列网格

四列网格使用 class=ui-grid-c来创建(25/25/25/25% )。

五列网格

四列网格使用 class=ui-grid-d来创建(20/20/20/20/20% )。

多行网格

#p#

可折叠块

可折叠内容标记

创建一个可折叠的内容块，创建一个容器，并添加 data-role="collapsible" 属性。

直接在容器里面添加任何标题元素(H1-H6)。框架会把标题自动转换为一个可点击的按钮并且添加一个“+”图标用来指明它是可以展开的。

在标题后面可以添加任何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" 属性：

<div data-role="collapsible" data-collapsed="true">

此代码将创建一个可折叠的块：

#p#

主题化内容

主题化内容区域

容器的主要内容区( data-role="content"容器)，应通过增加为data-role="page"的父容器添加 data-theme 属性来主题化，以确保背景色能够在整个页面都应用，而不管内容的长度是多少。(如果你仅仅为内容容器添加了 data-theme ，则背景色会在内容结束部分截断，可能会在固定footer和内容之间产生留白 )

<div data-role="page" data-theme="a">

主题化可折叠块

要为折叠块的标题设置颜色请为容器添加 data-theme 属性。该图标和主体目前没有data属性来主题化，但可以直接使用自定义的CSS样式。

</p> <div data-role="collapsible" data-collapsed="true" data-theme="a">