表单/表格

Basictable - jQuery响应式表格插件

阿里云

basictable.js 是一款简单实用的 jQuery 响应式表格插件。你可以设置 breakpoint 来定制自己的响应式断点。该表格能适应台式电脑、平板和手机的需求,响应式效果非常好。

使用方法:

使用该响应式表格插件需要在页面中引入 jquery、jquery.basictable.min.js 和 basictable.css 文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" type="text/css" href="css/basictable.css" />
  2. <script type="text/javascript" src="js/jquery.min.js"></script>
  3. <script type="text/javascript" src="js/jquery.basictable.min.js"></script>

HTML 结构:

表格的 HTML 结构使用标准的表格 HTML 结构。

  1. <table id="table">
  2.   <thead>
  3.     <tr>
  4.       <th>Name</th>
  5.       <th>Age</th>
  6.       <th>Gender</th>
  7.       <th>Height</th>
  8.       <th>Province</th>
  9.       <th>Sport</th>
  10.     </tr>
  11.   </thead>
  12.   <tbody>
  13.     <tr>
  14.       <td>Jill Smith</td>
  15.       <td>25</td> 
  16.       <td>Female</td>
  17.       <td>5'4</td>
  18.       <td>British Columbia</td>
  19.       <td>Volleyball</td>
  20.     </tr>
  21.     ......
  22.   </tbody>
  23. </table>

初始化插件:

在页面 DOM 元素加载完毕之后,可以通过 basictable()方法来初始化该表格。

  1. $('#table').basictable();

配置参数:

参数 类型 默认值 描述
breakpoint integer 568 定义表格进入响应式模式的断点(视口宽度)
contentWrap boolean true 是否将单元格中的内容包裹进 class 为.bt-content<span>元素中
forceResponsive boolean true 插件会在到达响应式断点时强制表格进入响应式模式。如果该参数设置为 false,那么表格即使大于它的直接父元素的宽度时页不会进入响应式模式
noResize boolean false 是否禁止表格通过 JS 来修改尺寸。除非使用媒体查询或其它的外部修改尺寸的方法,表格不会进入响应式模式
tableWrap boolean false 当插件初始化之后,会使用一个带.bt-wrapper class 的<div>元素来包裹表格。包裹 div 会在表格模式改变时切换激活的 class
showEmptyCells boolean false 如果设置为 true,那么空的单元格都会被显示

方法:

start:使表格进入响应式模式。该方法只有在插件初始化之后才能使用。

  1. $('table').basictable('start');

stop:将响应式表格切换会普通模式,移除响应式外观。该方法不会销毁插件的数据和包裹元素。表格在达到响应式断点时任然会正常工作。

  1. $('table').basictable('stop');

destroy:销毁响应式表格插件。

  1. $('table').basictable('destroy');

basictable.js 响应式表格插件的 github 地址为:https://github.com/jerrylow/basictable

Basictable - jQuery 响应式表格插件

已有 638 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!