jQuery Mobile 表格

響應式表格

響應式設計一般用於適配用戶各種行動裝置。

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

響應式表格讓頁面內容在行動端和桌面裝置上能很好的適配。

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

回流表格

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

建立表格，在 <table> 元素上新增 data-role="table" 和 "ui-responsive" 類別:

實例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>回流表格</h1>
  </div>
  
  <div data-role="main" class="ui-content">
    <p>回流模型表格在屏幕尺寸足够大时是水平显示，而在屏幕尺寸达到足够小时，所有的数据会变成垂直显示。</p>
    
    <p>重置窗口大小查看效果：</p>
    <table data-role="table" class="ui-responsive">
      <thead>
        <tr>
          <th>CustomerID</th>
          <th>CustomerName</th>
          <th>ContactName</th>
          <th>Address</th>
          <th>City</th>
          <th>PostalCode</th>
          <th>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>
        <tr>
          <td>2</td>
          <td>Antonio Moreno Taquer</td>
          <td>Antonio Moreno</td>
          <td>Mataderos 2312</td>
          <td>Mico D.F.</td>
          <td>05023</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Around the Horn</td>
          <td>Thomas Hardy</td>
          <td>120 Hanover Sq.</td>
          <td>London</td>
          <td>WA1 1DP</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Berglunds snabbk</td>
          <td>Christina Berglund</td>
          <td>Berguvsven 8</td>
          <td>Lule</td>
          <td>S-958 22</td>
          <td>Sweden</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

執行實例 »

點擊 "運行實例" 按鈕查看線上實例

	對於響應式表格，你必須包含 <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>

	如果你沒未列指定優先級，則列會一直存在，不會被隱藏。

把上面的兩段程式碼組合起來即可建立一個列切換的表格，這樣使用者就可以自訂要隱藏表格的哪些欄位：

實例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>列切换</h1>
  </div>
  
  <div data-role="main" class="ui-content">
    <p>列切换模型会在宽度不够时隐藏数据。</p>
   
    <h4>慢慢重置窗口大小。你会发现表格中的列会根据窗口的大小自动隐藏列。</h4>
    <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>
        <tr>
          <td>2</td>
          <td>Antonio Moreno Taquer</td>
          <td>Antonio Moreno</td>
          <td>Mataderos 2312</td>
          <td>Mico D.F.</td>
          <td>05023</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Around the Horn</td>
          <td>Thomas Hardy</td>
          <td>120 Hanover Sq.</td>
          <td>London</td>
          <td>WA1 1DP</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Berglunds snabbk</td>
          <td>Christina Berglund</td>
          <td>Berguvsven 8</td>
          <td>Lule</td>
          <td>S-958 22</td>
          <td>Sweden</td>
        </tr>

      </tbody>
    </table>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

執行實例 »

點擊 "運行實例" 按鈕查看線上實例

我們可以使用 data-column-btn-text 屬性來修改切換表格的文字：

實例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>列切换表格</h1>
  </div>
  
  <div data-role="main" class="ui-content">
    <table data-role="table" data-mode="columntoggle" class="ui-responsive" data-column-btn-text="点我显示或隐藏列!" 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>
        <tr>
          <td>2</td>
          <td>Antonio Moreno Taquer</td>
          <td>Antonio Moreno</td>
          <td>Mataderos 2312</td>
          <td>Mico D.F.</td>
          <td>05023</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Around the Horn</td>
          <td>Thomas Hardy</td>
          <td>120 Hanover Sq.</td>
          <td>London</td>
          <td>WA1 1DP</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Berglunds snabbk</td>
          <td>Christina Berglund</td>
          <td>Berguvsven 8</td>
          <td>Lule</td>
          <td>S-958 22</td>
          <td>Sweden</td>
        </tr>

      </tbody>
    </table>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

執行實例 »

點擊 "運行實例" 按鈕查看線上實例

表格樣式

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

實例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>切换表格样式</h1>
  </div>
  
  <div data-role="main" class="ui-content">
    <table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" 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>
        <tr>
          <td>2</td>
          <td>Antonio Moreno Taquer</td>
          <td>Antonio Moreno</td>
          <td>Mataderos 2312</td>
          <td>Mico D.F.</td>
          <td>05023</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Around the Horn</td>
          <td>Thomas Hardy</td>
          <td>120 Hanover Sq.</td>
          <td>London</td>
          <td>WA1 1DP</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Berglunds snabbk</td>
          <td>Christina Berglund</td>
          <td>Berguvsven 8</td>
          <td>Lule</td>
          <td>S-958 22</td>
          <td>Sweden</td>
        </tr>

      </tbody>
    </table>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div>  

</body>
</html>

執行實例 »

點擊 "運行實例" 按鈕查看線上實例

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

實例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
tr {
    border-bottom: 1px solid lightgray;
}
</style>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>切换表格样式</h1>
  </div>
  
  <div data-role="main" class="ui-content">
    <table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" 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>
        <tr>
          <td>2</td>
          <td>Antonio Moreno Taquer</td>
          <td>Antonio Moreno</td>
          <td>Mataderos 2312</td>
          <td>Mico D.F.</td>
          <td>05023</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Around the Horn</td>
          <td>Thomas Hardy</td>
          <td>120 Hanover Sq.</td>
          <td>London</td>
          <td>WA1 1DP</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Berglunds snabbk</td>
          <td>Christina Berglund</td>
          <td>Berguvsven 8</td>
          <td>Lule</td>
          <td>S-958 22</td>
          <td>Sweden</td>
        </tr>

      </tbody>
    </table>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div>  

</body>
</html>

執行實例 »

點擊 "運行實例" 按鈕查看線上實例

實例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>回流表格</h1>
  </div>
  
  <div data-role="main" class="ui-content">
    <p>回流模型表格在屏幕尺寸足够大时是水平显示，而在屏幕尺寸达到足够小时，所有的数据会变成垂直显示。</p>
    
    <p>重置窗口大小查看效果：</p>
    <table data-role="table" class="ui-responsive">
      <thead>
        <tr>
          <th>CustomerID</th>
          <th>CustomerName</th>
          <th>ContactName</th>
          <th>Address</th>
          <th>City</th>
          <th>PostalCode</th>
          <th>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>
        <tr>
          <td>2</td>
          <td>Antonio Moreno Taquer</td>
          <td>Antonio Moreno</td>
          <td>Mataderos 2312</td>
          <td>Mico D.F.</td>
          <td>05023</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Around the Horn</td>
          <td>Thomas Hardy</td>
          <td>120 Hanover Sq.</td>
          <td>London</td>
          <td>WA1 1DP</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Berglunds snabbk</td>
          <td>Christina Berglund</td>
          <td>Berguvsven 8</td>
          <td>Lule</td>
          <td>S-958 22</td>
          <td>Sweden</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

執行實例 »

點擊 "運行實例" 按鈕查看線上實例

jQuery Mobile 表格

響應式表格

回流表格

實例

列切換

實例

實例

表格樣式

實例

實例

實例

PHP中文網