当前位置：首页 > 网页特效 > 表格

ReStable-轻量级jQuery响应式表格插件

分类：表格日期：2024-05-14 点击(13) 评论(0)

简介

在页面中引入jquery/jquery.restable.min.js和jquery.restable.min.css文件。
```html
<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表格结构：

```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()方法来初始化该响应式表格插件。

```html
$(document).ready(function () {
    $('.mytable').ReStable();
});
```
上面的方法将页面中所有的表格都进行初始化。你也可以单独对某个表格进行初始化。

```html
$(document).ready(function () {
    $('.mytable').ReStable();
}); 
```                 
#####  配置参数
该响应式表格插件的可用参数如下：

```html
$('.mytable').ReStable({
    rowHeaders: true, 
    maxWidth: 480, 
    keepHtml: false
});  
```      
- rowHeaders：是否显示表格头。
- maxWidth：响应式断点。
- keepHtml：是否保持每个单元格的HTML内容。

web299.com

ReStable-轻量级jQuery响应式表格插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果