Latest web development tutorials

jQuery Mobile 表格

響應式表格

響應式設計一般用於適配用戶各種移動設備。

我們只需要使用一個簡單的類名,jQuery Mobile 就能根據屏幕的尺寸自動調整頁面內容。

響應式表格讓頁面內容在移動端和桌面設備上能夠很好的適配。

響應式表格有兩種類型: reflow(回流)列切換


回流表格

回流模型表格在屏幕尺寸足夠大時是水平顯示,而在屏幕尺寸達到足夠小時,所有的數據會變成垂直顯示。

創建表格,在<table> 元素上添加data-role="table" 和"ui-responsive" 類:

實例

<table data-role="table" class="ui-responsive" >

嘗試一下»
Note 對於響應式表格,你必須包含<thead> 和<tbody> 元素。
不要使用rowspan 或colspan 屬性; 響應式表格中是不支持這兩個屬性的。

列切換

列切換模型會在寬度不夠時隱藏數據。

列切換的表格創建方式如下:

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">

默認情況下,jQuery Mobile 會先隱藏表格右側的列。 但是,你可以在表格頭部(<th>)通過添加data-priority 屬性指定隱藏列的順序,data-priority 的值可以是1 (最高優先級) 到6 (最低優先級):

<th>I will never be hidden</th>
<th data-priority="1">我是非常重要的列 - 我不会被隐藏</th>
<th data-priority="3">我是重要的列 - 我可能被隐藏</th>
<th data-priority="5"我是不怎么重要的列 - 我最先被隐藏</th>
Note 如果你沒未列指定優先級,則列會一直存在,不會被隱藏。

把上面的兩段代碼組合起來即可創建一個列切換的表格,這樣用戶就可以自定義要隱藏表格的哪些列:

實例

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable" >
<thead>
<tr>
<th data-priority="6" >CustomerID</th>
<th>CustomerName</th>
<th data-priority="1" >ContactName</th>
<th data-priority="2" >Address</th>
<th data-priority="3" >City</th>
<th data-priority="4" >PostalCode</th>
<th data-priority="5" >Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Obere Str. 57</td>
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
</tbody>
</table>

嘗試一下»

我們可以使用data-column-btn-text 屬性來修改切換錶格的文本:

實例

<table data-role="table" data-mode="columntoggle" class="ui-responsive" data-column-btn-text="點我顯示或隱藏列!" id="myTable">

嘗試一下»

表格樣式

我們使用"ui-shadow" 類來為表格添加陰影:

添加陰影

<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">

嘗試一下»

使用CSS 來進一步設置表格樣式:

為所有行添加底部邊框

<style>
tr {
border-bottom: 1px solid #d6d6d6;
}
</style>

嘗試一下»

為<th> 元素添加按鈕及為偶數行添加背景

<style>
th {
border-bottom: 1px solid #d6d6d6;
}

tr:nth-child(even) {
background: #e9e9e9;
}
</style>

嘗試一下»