jQuery Mobile表格

響應表

當您希望您的移動網頁向用戶的設備，回應的內容響應式設計是非常有用的，例如它的屏幕大小和方向。

用一個簡單的類名，jQuery Mobile的是知道用戶的可用的屏幕尺寸和自動調整自身以顯示相關的內容對於特定的用戶。

響應表讓我們展示一大套的表格數據，這將令人神往為移動設備和台式機。

有兩種類型的響應表：回流和柱切換 。

回流表

回流模式水平定位表中的數據，直到其達到最小尺寸，那麼所有的行被垂直地組合在一起。

創建一個表，添加數據角色=“表”和一類的"ui-responsive"上<table>元素：

例

試一試»

為響應表正常工作，您必須包含<thead>和<tbody>元素。
不要使用ROWSPAN或合併單元格屬性; 它們沒有在響應表格的支持。

切換欄表

“列切換”模式將隱藏的列時，沒有足夠的寬度來顯示數據。

要創建一個列切換表，添加以下到<table>元素：

默認情況下，jQuery Mobile的將隱藏在表的右側列。但是，允許您指定要隱藏或以特定的順序顯示這些列。添加數據優先級屬性表中的頭(<th>)並指定在1（最高優先級）到6（最低優先級）一個數字：

<th>I will never be hidden</th>
<th data-priority="1" >I am very important - I will probably not be hidden</th>
<th data-priority="3" >I am less important - I could be hidden</th>
<th data-priority="5" >I am not that important - there is a good chance that I will be hidden</th>

如果你不為字段指定一個優先級，列將是持久的，而不是供躲藏。

把它放在一起，你已經創建了一個列切換台！注意，該框架在表的右上角自動添加一個按鈕。這可讓用戶選擇在表中顯示哪些列：

例

<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>

試一試»

要改變切換表格按鈕文本，使用數據列BTN-text屬性：