FooTable是一个高级jQuery插件,允许开发者在触屏智能手机及平板电脑等小型设备上制作数据非常惊人的HTML表格。它可以将HTML表转换成可扩展的响应式表格,且通过单击某一行即可将该行数据隐藏起来。

FooTable 是一个很给力的 jQuery 响应式表格插件,使用它可打造出自适应浏览器宽度的动态表格来。它的实现原理是当宽度变小时自动隐藏表格中的某些列,并以另一种形式呈现它们,即当它们隐藏时你只要点击每一行的第一格就可查看此部分数据。此插件的使用是非常简单的,扩展性也很强。

FooTable特点

  • 隐藏不同尺寸的列
  • 通过自定义属性设置参数
  • 基于Bootstrap框架设计
  • 简单的主题设置
  • 排序
  • 过滤
  • 分页
  • 易于扩展功能和安装插件

如何使用

首先在 HTML 页面头部中添加 jQuery 框架、 FooTable 插件,具体代码如下:

  1. <link href="footable-0.1.min.css" rel="stylesheet" />
  2. <script src="jquery.1.8.2.min.js"></script>
  3. <script src="footable-0.1.js"></script>

接下来添加表格,在需要动态变化的列上添加data属性,默认有两个选择phone(480)和tablet(1024),这表示在小于这个宽度时此列会隐藏。

  1. <table class="footable">
  2. <thead>
  3. <tr>
  4. <th>Name</th>
  5. <th data-hide="phone,tablet">Phone</th>
  6. <th data-hide="phone,tablet">Email</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td>Bob Builder</td>
  12. <td>555-12345</td>
  13. <td>bob@home.com</td>
  14. </tr>
  15. <tr>
  16. <td>Tom Cruise</td>
  17. <td>555-99911</td>
  18. <td>cruise1@crazy.com</td>
  19. </tr>
  20. </tbody>
  21. </table>

最后初始化插件。

  1. $('.footable').footable();

footable是什么?

footable是一个jQuery插件,使你的HTML表格到膨胀的响应表。这是它是如何工作的:

  1. 它隐藏了某些列的数据在不同的分辨率(我们称这些断点)。
  2. 行成为扩展到发现任何隐藏的数据。

那么简单!任何隐藏的数据可以通过单击行看到。

演示

浏览更多的实例页面请访问:http://fooplugins.com/footable-demos/

数据属性配置

footable的一个主要目标是使得它完全可通过数据属性。我们希望你可以看看HTML标记和确切知道footable要功能。在这个标记例如一看:

  1. <table class="footable" data-filter="#filter" data-page-size="5">
  2.     <thead>
  3.     <tr>
  4.       <th data-toggle="true">
  5.         First Name
  6.       </th>
  7.       <th data-sort-ignore="true">
  8.         Last Name
  9.       </th>
  10.       <th data-hide="phone,tablet">
  11.         Job Title
  12.       </th>
  13.       <th data-hide="phone,tablet" data-name="Date Of Birth">
  14.         DOB
  15.       </th>
  16.       <th data-hide="phone">
  17.         Status
  18.       </th>
  19.     </tr>
  20.     </thead>
  21. </table>

所有可用的数据属性中列出:http://fooplugins.com/footable/demos/data-attributes.htm

临界值

footable作品“临界值”的概念,这是不同的表格宽度,我们关心的。默认的断点:

  1. breakpoints: {
  2.   phone: 480,
  3.   tablet: 1024
  4. }

所以看的标记数据属性配置段,你现在可以说Job TitleDOB 和 Status列将被隐藏在桌子的宽度是小于480(phone)。

还有两个内置临界值称为“default”和“all”。

“default”临界值回退断点时,表格的宽度大于任何定义的临界值。看上面的JS代码片段的“default”的临界值将一旦表宽度大于1024的应用(tablet)。

“所有的断点是非常直接的在它的使用。你总是可以在任何表宽列隐藏应用data-hide=”all” 属性标题。

项目地址:http://themergency.com/footable/

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动。
转载请注明:文章转载自:问说网 » FooTable高级的响应式表格jQuery插件
本文标题:FooTable高级的响应式表格jQuery插件
本文地址:http://www.uedsc.com/footable.html

FooTable高级的响应式表格jQuery插件的更多相关文章

  1. [转]响应式表格jQuery插件 – Responsive tables

    本文转自:http://www.shejidaren.com/responsive-tables-for-bootstrap-3.html 这个Responsive tables jQuery插件依赖 ...

  2. 另外一款超棒的响应式布局jQuery插件 – Freetile.js

    在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...

  3. 推荐15款响应式的 jQuery Lightbox 插件

    利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...

  4. Chocolat.js – 响应式的 jQuery Lightbox 插件

    Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...

  5. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  6. 分享22款响应式的 jQuery 图片滑块插件

    响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...

  7. 12款响应式的 jQuery 旋转木马(传送带)插件

    在企业网站,作品集网站,电子商务网站或任何其他类型的网站内容显示图片可以使用 jQuery 旋转木马(传送带)插件来实现. jQuery 旋转木马插件允许开发人员以水平或垂直的方式显示内容,视频和图像 ...

  8. 15 个响应式的 jQuery 图像滑块插件

    设计师和开发人员总是试图使用新技术让网站更智能,而我们发现在许多网站上 jQuery 的图像滑块插件是非常受欢迎的.本文继续介绍 15 个 jQuery 图像滑块插件以供您选择. ELASTISLID ...

  9. 响应式瀑布流插件Grid-A-Licious

    Grid-A-Licious是一款遵守MIT协议的响应式瀑布流插件.该插件总代码行不超过400行,实现很巧妙,使用时也很流畅.实现原理也很简单,根据屏幕宽度和参数中设置的列宽度以及每项之间的间隔宽度, ...

随机推荐

  1. Rem实现自适应初体验

    第一次做移动端的页面,遇到的第一个问题就是移动端的轮播图.其实轮播图的插件有很多,但是完全满足需求的并不容易找. 需求: 1.实现基本的触屏轮播图效果 2.传入非标准比例的图片,可以自动平铺(有时候图 ...

  2. POJ 1182 食物链 (三态种类并查集)

    这题首先不说怎么做,首先要提醒的是..:一定不要做成多组输入,,我WA了一个晚上加上午,,反正我是尝到苦头了,,请诸君千万莫走这条弯路..切记 这题是上一题(Find them and Catch t ...

  3. 在Android Studio中使用shareSDK进行社会化分享(图文教程)

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  4. rsync+inotify实时同步环境部署记录

    随着应用系统规模的不断扩大,对数据的安全性和可靠性也提出的更好的要求,rsync在高端业务系统中也逐渐暴露出了很多不足.首先,rsync在同步数据时,需要扫描所有文件后进行比对,进行差量传输.如果文件 ...

  5. 21Mybatis_订单商品数据模型_一对多查询——resultMap方式

    这篇文章延续订单商品数据模型,这张讲述的是一对多的查询.(用resultMap) 给出几张表的内容: User表:

  6. android volley get请求使用

    调用百度api微博热门精选接口,使用了volley,简单说说volley get的请求方式的使用 header的设置和请求参数的设置,见代码如下: private void getWeixinNews ...

  7. C语言 共用体

    //共用体 union #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #includ ...

  8. Linux经常用到的命令

    1. Linux下用vim打开配置文件乱码,在终端输入:“LANG=”即可. 2. 查看端口是否被占用: 3. netstat -anp | grep port netstat -ltn 4. lso ...

  9. C#文件和文件文件夹按时间、名称排序-顺序与倒序

    对于文件和文件夹有多种排序方式,常用的就是按创建或修改时间.按文件名排序.在 C# 中,按时间和文件名排序都十分简单,用数组提供的排序方法 Array.Sort() 一行代码就可以搞定,当然也可以用常 ...

  10. &10 基本数据结构——栈,队列和链表

    #1,栈(stack) 定义[来自百度]:栈(stack)又名堆栈,它是一种运算受限的线性表.其限制是仅允许在表的一端进行插入和删除运算.这一端被称为栈顶,相对地,把另一端称为栈底.向一个栈插入新元素 ...