jQueryMobile网格jQueryMobile网格布局jQueryMobile提供了一套基于CSS的分列布局。然而，在移动设备上，由于考虑手机的屏幕宽度狭窄，一般不建议使用分栏分列布局。但有时您想要将较小的元素（如按钮或导航标签）并排地排列在一起，就像是在一个表格中一样。这种情况下，推荐使用分列布局。网格中的列是等宽的（合计是100%），没有边框、背景、margin或padding。这里有四种布局网格可供使用：网格类列列宽对应实例ui-grid-solo1100%ui-block-a尝试一下ui-grid-a250%/50%ui-block-a|b尝试一下ui-grid-b333%/33
jQueryMobile表格响应式表格响应式设计一般用于适配用户各种移动设备。我们只需要使用一个简单的类名，jQueryMobile就能根据屏幕的尺寸自动调整页面内容。响应式表格让页面内容在移动端和桌面设备上能够很好的适配。响应式表格有两种类型：reflow(回流)与列切换。回流表格回流模型表格在屏幕尺寸足够大时是水平显示，而在屏幕尺寸达到足够小时，所有的数据会变成垂直显示。创建表格，在元素上添加data-role="table"和"ui-responsive"类: 实例 data-role="table"class="ui-responsive"> 尝试一下»对于响应式表格，你必须包含和元素
jQueryMobile表格响应式表格响应式设计一般用于适配用户各种移动设备。我们只需要使用一个简单的类名，jQueryMobile就能根据屏幕的尺寸自动调整页面内容。响应式表格让页面内容在移动端和桌面设备上能够很好的适配。响应式表格有两种类型：reflow(回流)与列切换。回流表格回流模型表格在屏幕尺寸足够大时是水平显示，而在屏幕尺寸达到足够小时，所有的数据会变成垂直显示。创建表格，在元素上添加data-role="table"和"ui-responsive"类: 实例 data-role="table"class="ui-responsive"> 尝试一下»对于响应式表格，你必须包含和元素
jQueryMobile可折叠块可折叠内容块可折叠块允许您隐藏或显示内容-对于存储部分信息很有用。如需创建一个可折叠的内容块，需要为容器添加data-role="collapsible"属性。在容器（div）内，添加一个标题元素（H1-H6），后跟您想要进行扩展的HTML标记：实例 data-role="collapsible"> 点击我-我可以折叠!我是可折叠的内容。 尝试一下»默认情况下，内容是被折叠起来的。如需在页面加载时展开内容，请使用data-collapsed="false"：实例 data-role="collapsible"data-collapsed="false
jQueryMobile可折叠块可折叠内容块可折叠块允许您隐藏或显示内容-对于存储部分信息很有用。如需创建一个可折叠的内容块，需要为容器添加data-role="collapsible"属性。在容器（div）内，添加一个标题元素（H1-H6），后跟您想要进行扩展的HTML标记：实例 data-role="collapsible"> 点击我-我可以折叠!我是可折叠的内容。 尝试一下»默认情况下，内容是被折叠起来的。如需在页面加载时展开内容，请使用data-collapsed="false"：实例 data-role="collapsible"data-collapsed="false
jQueryMobile面板jQueryMobile中的面板会在屏幕的左侧向右侧划出。通过向指定id的元素添加data-role="panel"属性来创建面板。在中添加HTML标记来显示你的面板内容：面板标题..文本内容..注意：panel标记必须置于头部、内容、底部组成的页面之前或之后。要访问面板，需要创建一个指向面板id的链接，点击该链接即可打开面板:打开面板简单的面板实例 实例 data-role="panel"id="myPanel"> 面板头部.. 面板内容.. 标准页面头部 点击下面按钮打开面板。 href="#myPanel"class="ui
jQueryMobile面板jQueryMobile中的面板会在屏幕的左侧向右侧划出。通过向指定id的元素添加data-role="panel"属性来创建面板。在中添加HTML标记来显示你的面板内容：面板标题..文本内容..注意：panel标记必须置于头部、内容、底部组成的页面之前或之后。要访问面板，需要创建一个指向面板id的链接，点击该链接即可打开面板:打开面板简单的面板实例 实例 data-role="panel"id="myPanel"> 面板头部.. 面板内容.. 标准页面头部 点击下面按钮打开面板。 href="#myPanel"class="ui
jQueryMobile导航栏导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。默认情况下，导航栏中的链接将自动变成按钮（不需要data-role="button"）。使用data-role="navbar"属性来定义导航栏：实例 data-role="navbar">首页页面二 搜索 尝试一下»默认情况下，按钮的宽度与它的内容一样。使用一个无序列表来平均地划分按钮的宽度：1个按钮占100%宽度，2个按钮则各占50%的宽度，3个按钮则每个占33.3%的宽度，依此类推。然而，如果您在导航栏中指定了超过5个按钮，将会拆成多行（查看"更多实例"）。导航按钮图标我们可以使用da
jQueryMobile导航栏导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。默认情况下，导航栏中的链接将自动变成按钮（不需要data-role="button"）。使用data-role="navbar"属性来定义导航栏：实例 data-role="navbar">首页页面二 搜索 尝试一下»默认情况下，按钮的宽度与它的内容一样。使用一个无序列表来平均地划分按钮的宽度：1个按钮占100%宽度，2个按钮则各占50%的宽度，3个按钮则每个占33.3%的宽度，依此类推。然而，如果您在导航栏中指定了超过5个按钮，将会拆成多行（查看"更多实例"）。导航按钮图标我们可以使用da
jQueryMobile工具栏工具栏元素通常位于头部和尾部内-让导航易于访问：头部栏头部栏一般包含页面标题/logo或一两个按钮（通常是首页、选项或搜索）。您可以添加按钮到头部的左侧或右侧。下面的代码，将添加一个按钮到头部标题文本的左侧，添加一个按钮到头部标题文本的右侧：实例 主页 欢迎访问我的主页 搜索 尝试一下»下面的代码，将添加一个按钮到头部标题文本的左侧： 实例 ui-btn-leftui-icon-homeui-btn-icon-left">主页 欢迎访问我的主页 尝试一下»但是，如果您把按钮链接放置在元素之后，将无法显示右侧的文本。要添加一个按钮到头部标题的右侧，请指定clas
