响应式表格
响应式设计一般用于适配用户各种移动设备。
我们只需要使用一个简单的类名，jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容。
响应式表格让页面内容在移动端和桌面设备上能够很好的适配。
响应式表格有两种类型：reflow(回流)与列切换。
回流表格
回流模型表格在屏幕尺寸足够大时是水平显示，而在屏幕尺寸达到足够小时，所有的数据会变成垂直显示。
创建表格，在
元素上添加 data-role="table" 和 "ui-responsive" 类:
实例
回流表格
回流模型表格在屏幕尺寸足够大时是水平显示，而在屏幕尺寸达到足够小时，所有的数据会变成垂直显示。
重置窗口大小查看效果：
| CustomerID | CustomerName | ContactName | Address | City | PostalCode | Country |
| 1 | Alfreds Futterkiste | Maria Anders | Obere Str. 57 | Berlin | 12209 | Germany |
| 2 | Antonio Moreno Taquer | Antonio Moreno | Mataderos 2312 | Mico D.F. | 05023 | Mexico |
| 3 | Around the Horn | Thomas Hardy | 120 Hanover Sq. | London | WA1 1DP | UK |
| 4 | Berglunds snabbk | Christina Berglund | Berguvsven 8 | Lule | S-958 22 | Sweden |
底部文本
运行实例 »
点击 "运行实例" 按钮查看在线实例
 |
对于响应式表格，你必须包含 和 |
元素。
不要使用 rowspan 或 colspan 属性; 响应式表格中是不支持这两个属性的。
列切换
列切换模型会在宽度不够时隐藏数据。
列切换的表格创建方式如下：
默认情况下，jQuery Mobile 会先隐藏表格右侧的列。但是，你可以在表格头部(
)通过添加 data-priority 属性指定隐藏列的顺序，data-priority 的值可以是 1 (最高优先级) 到 6 (最低优先级):
| I will never be hidden | 我是非常重要的列 - 我不会被隐藏 | 我是重要的列 - 我可能被隐藏 |
|
如果你没未列指定优先级，则列会一直存在，不会被隐藏。 |
把上面的两段代码组合起来即可创建一个列切换的表格，这样用户就可以自定义要隐藏表格的哪些列：
实例
列切换 列切换模型会在宽度不够时隐藏数据。 慢慢重置窗口大小。你会发现表格中的列会根据窗口的大小自动隐藏列。 | CustomerID | CustomerName | ContactName | Address | City | PostalCode | Country | | 1 | Alfreds Futterkiste | Maria Anders | Obere Str. 57 | Berlin | 12209 | Germany | | 2 | Antonio Moreno Taquer | Antonio Moreno | Mataderos 2312 | Mico D.F. | 05023 | Mexico | | 3 | Around the Horn | Thomas Hardy | 120 Hanover Sq. | London | WA1 1DP | UK | | 4 | Berglunds snabbk | Christina Berglund | Berguvsven 8 | Lule | S-958 22 | Sweden | 底部文本
运行实例 »
点击 "运行实例" 按钮查看在线实例
我们可以使用 data-column-btn-text 属性来修改切换表格的文本：
实例
列切换表格 | CustomerID | CustomerName | ContactName | Address | City | PostalCode | Country | | 1 | Alfreds Futterkiste | Maria Anders | Obere Str. 57 | Berlin | 12209 | Germany | | 2 | Antonio Moreno Taquer | Antonio Moreno | Mataderos 2312 | Mico D.F. | 05023 | Mexico | | 3 | Around the Horn | Thomas Hardy | 120 Hanover Sq. | London | WA1 1DP | UK | | 4 | Berglunds snabbk | Christina Berglund | Berguvsven 8 | Lule | S-958 22 | Sweden | 底部文本
运行实例 »
点击 "运行实例" 按钮查看在线实例
表格样式
我们使用 "ui-shadow" 类来为表格添加阴影：
实例
切换表格样式 | CustomerID | CustomerName | ContactName | Address | City | PostalCode | Country | | 1 | Alfreds Futterkiste | Maria Anders | Obere Str. 57 | Berlin | 12209 | Germany | | 2 | Antonio Moreno Taquer | Antonio Moreno | Mataderos 2312 | Mico D.F. | 05023 | Mexico | | 3 | Around the Horn | Thomas Hardy | 120 Hanover Sq. | London | WA1 1DP | UK | | 4 | Berglunds snabbk | Christina Berglund | Berguvsven 8 | Lule | S-958 22 | Sweden | 底部文本
运行实例 »
点击 "运行实例" 按钮查看在线实例
使用 CSS 来进一步设置表格样式:
实例
切换表格样式 | CustomerID | CustomerName | ContactName | Address | City | PostalCode | Country | | 1 | Alfreds Futterkiste | Maria Anders | Obere Str. 57 | Berlin | 12209 | Germany | | 2 | Antonio Moreno Taquer | Antonio Moreno | Mataderos 2312 | Mico D.F. | 05023 | Mexico | | 3 | Around the Horn | Thomas Hardy | 120 Hanover Sq. | London | WA1 1DP | UK | | 4 | Berglunds snabbk | Christina Berglund | Berguvsven 8 | Lule | S-958 22 | Sweden | 底部文本
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
回流表格 回流模型表格在屏幕尺寸足够大时是水平显示，而在屏幕尺寸达到足够小时，所有的数据会变成垂直显示。 重置窗口大小查看效果： | CustomerID | CustomerName | ContactName | Address | City | PostalCode | Country | | 1 | Alfreds Futterkiste | Maria Anders | Obere Str. 57 | Berlin | 12209 | Germany | | 2 | Antonio Moreno Taquer | Antonio Moreno | Mataderos 2312 | Mico D.F. | 05023 | Mexico | | 3 | Around the Horn | Thomas Hardy | 120 Hanover Sq. | London | WA1 1DP | UK | | 4 | Berglunds snabbk | Christina Berglund | Berguvsven 8 | Lule | S-958 22 | Sweden | 底部文本
运行实例 »
点击 "运行实例" 按钮查看在线实例
|
|
