1. 首页
  2. css

CSSFooTable:用于响应数据表的jQuery插件

以下是Brad Vincent的一篇客座文章,他在文章中介绍了新的jQuery插件,帮助实现数据表的响应。响应性数据表一直是这里反复出现的话题,首先是我早期的探索,然后是综述。我认为这种新的jQuery插件方法值得讨论,原因有很多:很多人喜欢使用这种灵活的插件,而不是手工制作一次性的解决方案,这是一种与我目前所看到的稍有不同的UI方法,而且功能完全是在JS中处理的(CSS只是为了设计风格)。现在,每个人都在积极响应潮流。除了快速响应的布局,一切都是快速响应:滑块,灯箱,画廊,你的名字!但是有一天,当我在一个有很多列的HTML表上工作时,我想\”这在我的iPhone上会是什么样子?\”。然后我搜索了\”响应表\”,找到了Chris关于一些解决方案的综述文章。
那么为什么要创建FooTable呢?
响应数据表的解决方案有很多,包括:
1. Zurb可以在较小的设备上水平滚动表格。
2. Dave Bushell可以翻转表格。
3. Filament Groups的解决方案允许用户选择要显示的列。
4. Stewart Curry的解决方案隐藏不太重要的列。
5. Chris Coyier的解决方案将列表中每一行的数据分组列消失了。
我喜欢一些响应表解决方案所做的工作,但没有一个能完全吸引我。所以我和我的朋友Steve聚在一起,他是jQuery专家,我们开始开发一个新的jQuery插件。我们非常喜欢消失列的概念,但是我们仍然希望能够以某种方式看到隐藏的数据。我们还喜欢Chris关于将列反转为行的概念,所以我们决定将这两个概念结合起来,FooTable就诞生了。FooTable是如何工作的?
FooTable非常简单:
1. 它以不同的分辨率隐藏某些列的数据(我们称这些断点)。
2. 行可以展开以显示隐藏的数据。
3. The table will be filtered by an input with id \”filter\”>
4. The table will be sorted initially by the First Name column and it will be sorted in descending order>
5. The Last Name column cannot be sorted>
6. The Job Title and DOB columns will be hidden on phone and tablet>
7. The Status column will be hidden on phones>
8. The DOB and Status columns use numeric data>
9. 响应式展示–这是迄今为止所有演示的地方,它使用一个易于使用的视口切换器,以最小的工作量演示功能!
10. 带有文本的简单表格
11. 包含图像和链接的表格
12. 排序演示

CSSFooTable:用于响应数据表的jQuery插件 为WP2原创文章,链接:https://www.wp2.cn/css/cssfootable%ef%bc%9a%e7%94%a8%e4%ba%8e%e5%93%8d%e5%ba%94%e6%95%b0%e6%8d%ae%e8%a1%a8%e7%9a%84jquery%e6%8f%92%e4%bb%b6/