HTML & CSS ? 響應式表格jQuery插件 – Responsive tables

響應式表格jQuery插件 – Responsive tables

發表于: HTML & CSS. 評論 (1)
Sponsor

這個Responsive tables jQuery插件依賴于Bootstrap 3使用，比BS自帶的自適應多了一些好用的功能，比如篩選顯示，Focus選定、Table頭滑動固定等，下來看看介紹。

響應式表格jQuery插件 - Responsive tables

文章目錄：

  1. Responsive tables介紹
  2. Responsive tables使用教程

1.Responsive tables介紹

Demo地址：http://gergeo.se/RWD-Table-Patterns/#demo

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

1.自定義顯示表格列，在表格右上角可以看到，點Display all則顯示全部。

另外我最喜歡的就是這個data-priority=””屬性，它可以定義數據在特定分辨率顯示或者隱藏掉，類似Bootstrap的class=”col-md/col-lg”柵格技巧，具體請看使用教程。

響應式表格jQuery插件

 

2.Table頭部Fixed定位，當你向下滑動時，Table頭部會自動固定在頂部。有點像scroll to fixed的jQuery功能。

jQuery插件

 

3.Focus選中狀態，點擊Focus按鈕開啟，然后你試試點擊某行表格數據，你會看到你選中的一行表格會高亮顯示，而其它數據則變灰了。

響應式表格jQuery插件

 

2.Responsive tables使用教程

Step1: CSS樣式表

在HTML頭部引入這個插件的樣式表

<head>

...

<link rel="stylesheet" href="css/rwd-table.min.css">

</head>

Step2: js

把JS添加到<head>前或<body>…</body>里面

<body>

...

<script type="text/javascript" src="js/rwd-table.js"></script>

<script>

$(function() {

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

adddisplayallbtn: true,

addfocusbtn: true,

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

})

});

</script>

</body>

Step3: IE兼容

<!--[if lt IE 7 ]> <html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

<!--[if IE 7 ]>    <html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->

<!--[if IE 8 ]>    <html lang="en" class="no-js lt-ie10 lt-ie9"> <![endif]-->

<!--[if IE 9 ]>    <html lang="en" class="no-js lt-ie10"> <![endif]-->

<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Step4: HTML

Bootstrap的響應式表格要在table外面添加一個<div class=”table-responsive”>。

<div class="table-responsive">

<table id="example-table" class="table table-complex table-bordered table-striped">

...

</table>

</div>

Step5: 配置Table

通過data-priority屬性可以定義表格列在不同屏分辨顯示與隱藏，這個屬性請設置在<th 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 以下可見

插件下載地址：Github | 在線DEMO
推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流：為設計新人提供的設計交流群，請加入UI設計交流群，分享經驗、接單、求職、聊設計。
贊助商鏈接

與 、、 相關的文章

贊助商鏈接
設計達人微信交流社區：shejidaren888
喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。
«
»

+ 添加評論One Response to “響應式表格jQuery插件 – Responsive tables”

  1. 仍然 - 回復
    2014 年 08 月 11 日 下午 3:54

    民


{ 發表評論 }