jQuery Mobile 表格
作者:小确幸
时间:2026-08-11
浏览:1
响应式表格 响应式设计一般用于适配用户各种移动设备。 我们只需要使用一个简单的类名,jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容。 响应式表格让页面内容在移动端和桌面设备上能够很好的适配。 响应式表格有两种类型: reflow(回流) 与 列切换。 回流表格 回流模型表格在屏幕尺寸
本文目录
响应式表格
响应式设计一般用于适配用户各种移动设备。
我们只需要使用一个简单的类名,jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容。
响应式表格让页面内容在移动端和桌面设备上能够很好的适配。
响应式表格有两种类型: reflow(回流) 与 列切换。
回流表格
回流模型表格在屏幕尺寸足够大时是水平显示,而在屏幕尺寸达到足够小时,所有的数据会变成垂直显示。
要创建这种表格,直接在
| 对于响应式表格,你必须包含 和 |
列切换
列切换模型会在宽度不够时隐藏数据。
列切换的表格创建方式如下:
在默认设置下,jQuery Mobile 会优先把表格右侧的列隐藏起来。不过,这个规则并不是固定死的。只要在表头(
)里加上 data-priority 属性,就可以明确指定各列的隐藏顺序。这个属性的取值范围是 1 到 6,其中 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
我们可以使用 data-column-btn-text 属性来修改切换表格的文本:
实例
表格样式
我们使用 "ui-shadow" 类来为表格添加阴影:
添加阴影
使用 CSS 来进一步设置表格样式:
为所有行添加底部边框
为 元素添加按钮及为偶数行添加背景
本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系bd@zhengruan.com
作者最新文章
漫蛙漫画下载免费安卓最新版本
2026-10-13 13:18
漫蛙下载最新版安装包
2026-10-13 13:18
漫蛙manwaapp安卓最新版下载
2026-10-13 13:18
漫蛙动漫APP下载安装最新版本
2026-10-13 13:17
漫蛙漫画APP官方下载最新版本
2026-10-13 13:17
上一篇:
jQuery Mobile 网格
下一篇:
jQuery Mobile 可折叠块
热门文章
更多
精品专题
更多
Mac软件
更多
WINDOWS
更多










































