表单/表格
ReStable-轻量级jQuery响应式表格插件
PetitQ
ReStable 是一款轻量级的 jQuery 响应式表格插件。该响应式表格插件可以在指定的响应式断点时，将表格结构切换为无序列表结构，以适应在小屏幕设备中显示表格数据。
使用方法:
在页面中引入 jquery/jquery.restable.min.js 和 jquery.restable.min.css 文件。
也想出现在这里？联系我们吧
<link rel="stylesheet" type="text/css" href="css/jquery.restable.min.css" />
<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.restable.min.js"></script>
HTML 结构:
该表格采用基本的 HTML 表格结构：
<table class="mytable">
<thead>
<tr>
<td>表格头1</td>
<td>表格头2</td>
<td>表格头3</td>
<td>表格头4</td>
</tr>
</thead>
<tbody>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
</tr>
<tr>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
<td>单元格8</td>
</tr>
<tr>
<td>单元格9</td>
<td>单元格10</td>
<td>单元格11</td>
<td>单元格12</td>
</tr>
</tbody>
</table>
初始化插件:
在页面 DOM 元素加载完毕之后，可以通过 ReStable()方法来初始化该响应式表格插件。
$(document).ready(function () {
$('.mytable').ReStable();
});
上面的方法将页面中所有的表格都进行初始化。你也可以单独对某个表格进行初始化。
$(document).ready(function () {
$('.mytable').ReStable();
});
配置参数:
该响应式表格插件的可用参数如下：
$('.mytable').ReStable({
rowHeaders: true,
maxWidth: 480,
keepHtml: false
});
rowHeaders：是否显示表格头
maxWidth：响应式断点
keepHtml：是否保持每个单元格的 HTML 内容
ReStable 响应式表格插件的 github 地址为：https://github.com/micc83/ReStable
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
