jQuery Mobile レスポンシブテーブルを設置する

jQuery Mobile ではテーブルウィジェットとして、画面サイズに応じてレイアウトや表示項目を調整するレスポンシブテーブルを用意しています。レスポンシブテーブルにはリフローモードとカラムトグルモードの2種類があり、その設置方法を解説します。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. レスポンシブテーブルの概要
  2. 使用するクラス
  3. 使用するデータ属性
  4. リフローモード
  5. カラムトグルモード

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

レスポンシブテーブルの概要

レスポンシブテーブルを設置するには、table要素にデータ属性「data-role="table"」を割り当て、ui-responsiveクラスを付加します。

レスポンシブテーブルのモードは、リフローモード(Reflow mode)とカラムトグルモード(Column toggle mode)の2種類があり、data-mode属性で切り替えます。

リフローモード

画面の横幅が狭くなると、表のレイアウトが変わるモードです。
狭い画面では、各行のデータはラベルとそれに対応するデータのペアが縦に並び、1レコードごとの表示になります。

カラムトグルモード

画面の横幅に応じて、表示する列が自動的に選択されるモードです。表示する画面サイズが十分でないときはいくつかの列は非表示になります。

【注意点】

  • テーブルの先頭はth要素でマークアップします。
  • グループヘッダーを除き、rowspan/colspan属性を使用してはいけません。
  • カラムトグルモードではtable要素にid属性を付加します。

使用するクラス

クラス 説明
ui-responsive レスポンシブテーブルを適用するtable要素に指定する
table-stroke 行にボーダーの区切りをつける
table-stripe 1行おきに背景をつける

使用するデータ属性

データ属性 説明
data-mode reflow | columntoggle レスポンシブテーブルのモード
data-priority priority number (1-6) カラムトグルモードで表示する列の優先順位
data-column-btn-text string カラムトグルモードの列選択ボタンのテキスト
data-column-btn-theme swatch letter (a-z) カラムトグルモードの列選択ボタンに適用するスウォッチ
data-column-popup-theme swatch letter (a-z) カラムトグルモードの列選択ポップアップに適用するスウォッチ

リフローモード

横幅が35em以下の画面になると、各行のデータはラベルとそれに対応するデータのペアが縦に並び、1レコードごとの表示となります。

リフローモードのテーブルの例

設置するには、table要素にデータ属性「data-role="table"」を指定し、
さらに ui-responsiveクラスを付加します。

モード指定は「data-mode="reflow"」でリフローモードになりますが、このモードはデフォルトですので指定を省略しても構いません。

以下はリフローモードのサンプルコードです。
table-strokeクラスは、行にボーダーの区切りをつけるために追加しています。

カラムトグルモード

画面の横幅に応じて、表示する列が自動的に選択されるモードです。
表示する画面サイズが十分でないときはいくつかの列は非表示になり、画面サイズが広がるにつれて隠れていた列が表示されます。

カラムトグルモードの表の例

現在の画面にどの列を表示するかはマニュアルで選択できます。そのためのポップアップを表示するボタンが表の右上につきます。ポップアップでは表示する列にチェックを入れます。

列選択ポップアップ画面

設置するには、リフローモードの設定に「data-mode="columntoggle"」を追加します。
またid属性も付加します。

以下、カラムトグルモードでのオプションを説明します。

優先順位を指定する

デフォルトではフレームワークは画面の横幅が狭くなるにつれ、テーブルの右側の列から非表示にします。しかし data-priority属性を使うことで優先順位を設定しておくことが可能です。
優先順位はth要素に1(高順位)~6(低順位)の値で設定しておきます。画面の横幅が狭くなると優先順位の低い順から非表示になります。優先順位を指定しなかった列は常に表示されます。

ストライプを追加する

table-stripeクラスを付加すると、1行おきに背景がつき表が見やすくなります。

ボタンテキストを変更する

data-column-btn-text属性で、列選択ボタンに表示するテキストを指定できます。
デフォルトは "Columns..." となっています。

ボタンテーマを変更する

列選択ボタンのテーマは、data-column-btn-theme属性で変更できます。

ポップアップテーマを変更する

列選択ポップアップのテーマは、data-column-popup-theme属性で変更できます。

以下はカラムトグルモードのサンプルコードです。上で説明したオプションも指定しています。

スマートフォンサイトで表をデザインするのは Webサイト制作者の苦労するところです。PCサイト用に作った表をそのまま表示したら、とても見づらいものになることもあります。レスポンシブテーブルは表を小さな画面で表現する1つの手段ですが、情報を見直しユーザーに本当に伝えなければならないもの以外は思い切って省いてしまうのも手です。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ