jQuery Mobile 表格
来源:互联网 发布:绿色建筑设计软件 编辑:程序博客网 时间:2024/06/06 02:01
响应式表格有两种类型: reflow(回流) 与 列切换。
回流表格
回流模型表格在屏幕尺寸足够大时是水平显示,而在屏幕尺寸达到足够小时,所有的数据会变成垂直显示。
创建表格,在 <table> 元素上添加 data-role="table" 和 "ui-responsive" 类:
对于响应式表格,你必须包含 <thead> 和 <tbody> 元素。
不要使用 rowspan 或 colspan 属性; 响应式表格中是不支持这两个属性的。
<table data-role="table" class="ui-responsive">
<thead>
<tr>
<th>CustomerID</th>
<th>CustomerName</th>
<th>ContactName</th>
<th>Address</th>
<th>City</th>
<th>PostalCode</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Obere Str. 57</td>
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
<tr>
<td>2</td>
<td>Antonio Moreno Taquer</td>
<td>Antonio Moreno</td>
<td>Mataderos 2312</td>
<td>Mico D.F.</td>
<td>05023</td>
<td>Mexico</td>
</tr>
<tr>
<td>3</td>
<td>Around the Horn</td>
<td>Thomas Hardy</td>
<td>120 Hanover Sq.</td>
<td>London</td>
<td>WA1 1DP</td>
<td>UK</td>
</tr>
<tr>
<td>4</td>
<td>Berglunds snabbk</td>
<td>Christina Berglund</td>
<td>Berguvsven 8</td>
<td>Lule</td>
<td>S-958 22</td>
<td>Sweden</td>
</tr>
</tbody>
</table>
列切换
列切换模型会在宽度不够时隐藏数据。
默认情况下,jQuery Mobile 会先隐藏表格右侧的列。但是,你可以在表格头部(<th>)通过添加 data-priority 属性指定隐藏列的顺序,data-priority 的值可以是 1 (最高优先级) 到 6 (最低优先级):
<th data-priority="1">我是非常重要的列 - 我不会被隐藏</th><th data-priority="3">我是重要的列 - 我可能被隐藏</th><th data-priority="5">我是不怎么重要的列 - 我最先被隐藏</th><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>列切换</h1>
</div>
<div data-role="main" class="ui-content">
<p>列切换模型会在宽度不够时隐藏数据。</p>
<h4>慢慢重置窗口大小。你会发现表格中的列会根据窗口的大小自动隐藏列。</h4>
<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
<thead>
<tr>
<th data-priority="6">CustomerID</th>
<th>CustomerName</th>
<th data-priority="1">ContactName</th>
<th data-priority="2">Address</th>
<th data-priority="3">City</th>
<th data-priority="4">PostalCode</th>
<th data-priority="5">Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Obere Str. 57</td>
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
<tr>
<td>2</td>
<td>Antonio Moreno Taquer</td>
<td>Antonio Moreno</td>
<td>Mataderos 2312</td>
<td>Mico D.F.</td>
<td>05023</td>
<td>Mexico</td>
</tr>
<tr>
<td>3</td>
<td>Around the Horn</td>
<td>Thomas Hardy</td>
<td>120 Hanover Sq.</td>
<td>London</td>
<td>WA1 1DP</td>
<td>UK</td>
</tr>
<tr>
<td>4</td>
<td>Berglunds snabbk</td>
<td>Christina Berglund</td>
<td>Berguvsven 8</td>
<td>Lule</td>
<td>S-958 22</td>
<td>Sweden</td>
</tr>
</tbody>
</table>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
</html>
我们可以使用 data-column-btn-text 属性来修改切换表格的文本:
<table data-role="table" data-mode="columntoggle" class="ui-responsive" data-column-btn-text="点我显示或隐藏列!">
我们使用 "ui-shadow" 类来为表格添加阴影:
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow"
- jQuery Mobile 表格
- jQuery Mobile 表格
- jQuery Mobile
- jQuery Mobile
- JQUERY MOBILE
- jQuery Mobile
- jquery mobile
- jQuery Mobile
- jQuery Mobile
- jquery mobile
- jQuery Mobile
- jQuery Mobile
- JQuery Mobile
- jquery mobile
- jQuery Mobile
- jQuery Mobile
- jQuery Mobile
- jquery Mobile
- Redis 数据类型之List类型
- 点和解析式有关的操作
- shape属性参考
- [系分] 设计对象的原则
- PHP中new self()和new static()的区别探究
- jQuery Mobile 表格
- 带有一键清空功能的EditText
- CentOs 7 相关命令
- studio2.3app签名打包安装失败,找不到签名证书。
- HttpClient 实现文件的上传
- Android xmpp开发 asmack获取离线在线添加好友讯息 及 好友上线下线通知
- DELPHI窗体属性介绍
- python之numpy学习
- Retrofit的使用与基本的封装