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>

嘗試一下 ?