html5 响应式表格插件,响应式表格jQuery插件 – Responsive tables

响应式表格jQuery插件 – Responsive tables

4月 24, 2014

评论 (1)

Sponsor

这个Responsive tables jQuery插件依赖于Bootstrap 3使用，比BS自带的自适应多了一些好用的功能，比如筛选显示，Focus选定、Table头滑动固定等，下来看看介绍。

文章目录：

1.Responsive tables介绍

注：这个jQuery插件要在Bootstrap 3前端框架上使用。

1.自定义显示表格列，在表格右上角可以看到，点Display all则显示全部。

另外我最喜欢的就是这个data-priority=””属性，它可以定义数据在特定分辨率显示或者隐藏掉，类似Bootstrap的class=”col-md/col-lg”栅格技巧，具体请看使用教程。

2.Table头部Fixed定位，当你向下滑动时，Table头部会自动固定在顶部。有点像scroll to fixed的jQuery功能。

3.Focus选中状态，点击Focus按钮开启，然后你试试点击某行表格数据，你会看到你选中的一行表格会高亮显示，而其它数据则变灰了。

2.Responsive tables使用教程

Step1: CSS样式表

在HTML头部引入这个插件的样式表

...

Step2: js

把JS添加到

前或…里面

...

$(function() {

$('.table-complex').responsiveTable({

adddisplayallbtn: true,

addfocusbtn: true,

fixednavbar: '#navbar'//In case you have a fixed navbar.

})

});

Step3: IE兼容

Step4: HTML

Bootstrap的响应式表格要在table外面添加一个

。

...

Step5: 配置Table

通过data-priority属性可以定义表格列在不同屏分辨显示与隐藏，这个属性请设置在

上。

data-priority=”” 总是可见的，不会出现在右上角的筛选下拉列表。

data-priority=”1″ 保持可见，但可以在下拉列表筛选隐藏。

data-priority=”2″ 480px 分辨率以下可见

data-priority=”3″ 640px 以下可见

data-priority=”4″ 800px 以下可见

data-priority=”5″ 960px 以下可见

data-priority=”6″ 1120px 以下可见

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

仍然 -

2014 年 08 月 11 日 下午 3:54

民

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站