jQuery Mobileテーブル

❮前次の章❯

レスポンシブ表

あなたがモバイルウェブページのコンテンツは、その画面サイズや向きのように、ユーザーのデバイスに応答するようにしたいときレスポンシブデザインが便利です。

単純なクラス名で、jQueryのモバイルユーザの利用可能な画面サイズを認識し、自動的にその特定のユーザに関連するコンテンツを表示するために自分自身のサイズを変更します。

応答テーブルは、私たちは携帯電話とデスクトップの両方のために魅力的に見えるだろう表データの大規模なセットを表示することができます。

リフロー及び列トグル ：応答テーブルの2種類があります。

リフロー表

それは最小サイズに達するまでリフローモードは、すべての行が縦に一緒にグループ化され、水平方向にテーブルデータを配置します。

テーブルを作成し、データ-役割= "表"とのクラスの追加"ui-responsive"について<table>要素を：

例

»それを自分で試してみてください

応答テーブルが正しく機能するためには、含まれている必要があり<thead>と<tbody>要素を。
ROWSPANやCOLSPAN属性を使用しないでください。彼らは、応答性の表でサポートされていません。

列のトグル表

データを表示するのに十分な幅がない場合」欄トグル」モードでは、列を非表示にします。

コラムトグルテーブルを作成するには、に次を追加し<table>要素：

デフォルトでは、jQueryのモバイルは、表の右側の列を非表示になります。しかし、あなたは非表示にしたり、特定の順序で示されるべき列を指定することが許可されています。テーブルのヘッダへのデータの優先度の属性を追加します(<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属性を使用します。