jQuery Mobile逆引きリファレンス
Tableウィジェットでレスポンシブルなテーブルを作成するには？（Column toggle編）
画面サイズに応じて表示幅を調整してくれるレスポンシブル・テーブル（列を選択的に表示するColumn toggleモード）を、jQuery MobileのTableウィジェットで作成する方法を解説する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
Tableウィジェットを利用することで、レスポンシブル・テーブルを作成できます。レスポンシブル・テーブルとは、画面サイズに応じて表示幅を調整してくれるテーブルのこと。具体的には、画面サイズによって列を選択的に表示するColumn toggleモード、画面幅が広いときには通常のテーブルを、狭いときには名前／値の連票形式で表示するReflowモードとが用意されています。
本稿では、まずそのうちの1つ、Column toggleモードについて解説します。
列を選択的に表示する「Column toggleモード」
以下のサンプルを動作させると、画面サイズによって（例えばスマホの画面を横置きから縦置きにすることで）、表示列が変化することを確認してみましょう。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<!--レスポンシブルテーブルの設定-->
<table id="tbl" data-role="table" data-mode="columntoggle"
class="ui-responsive">
<!--ヘッダー行で列選択の優先順位を設定-->
<thead>
<tr>
<th data-priority="4"><abbr title="ISBNコード">ISBN</abbr></th>
<th>タイトル</th>
<th data-priority="1">出版社</th>
<th data-priority="2">価格</th>
<th data-priority="3">配本日</th>
</tr>
</thead>
<tbody>
<tr>
<td>978-4-7741-6296-6</th>
<td>Windows 8開発ポケットリファレンス</td>
<td>技術評論社</td>
<td>3024</td>
<td>2014年02月19日</td>
</tr>
<tr>
……中略……
</tbody>
</table>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
縦から横に変更
レスポンシブル・テーブルを作成する場合には、テーブルのマークアップも以下のような点に留意してください。
- <table>要素にはid値を明示すること（Column toggleモードでは必須）
- <thead>／<tbody>要素は任意ですが、明示すべき
- テーブルの先頭はタイトル行であること（<th>要素でマークアップすること）
- 長いヘッダー（タイトル）は、<abbr>要素（title属性*1）で定義すること（後述するポップアップでは長いタイトルを表示）
- rowspan／colspan属性は利用しない（グループヘッダー（後日別稿で紹介）を利用する場合を除く）
- *1 <abbr>要素は略語を表します。略さない正式名称はtitle属性で表します。
以上のようなテーブルを準備できたら、jQuery Mobileのdata-xxxxx属性を付与します。
- <table>要素には「data-role="table"」属性、「class="ui-responsive"」属性を付与すること
- Column toggleモードでは「data-mode="columntoggle"」属性が必須（動作モードのデフォルトはReflowモード）
- 列表示の優先順位はdata-priority属性で指定（指定のないものは必ず表示）
ポップアップからも表示列を選択できる
表示列は、画面幅を変えることで自動的に選択されるほか、テーブル右上に表示される［Columns］からも行えます。［Columns］ボタンをクリックすると、必須表示の列を除く全ての列を列挙したチェックボックスがポップアップしますので、これをオンオフすることでも列表示を切り替えられます。
列選択のポップアップは、以下のようにカスタマイズもできます。
|
<table id="tbl" data-role="table" data-mode="columntoggle"
class="ui-responsive" data-column-btn-text="列選択..."
data-column-btn-theme="b" data-column-popup-theme="b">
|
それぞれの属性の意味は、以下の通りです。
| 属性 | 概要 |
|---|---|
| data-column-btn-text | ポップアップを表示するためのボタンのキャプション |
| data-column-btn-theme | ポップアップボタンのテーマ |
| data-column-popup-theme | ポップアップのテーマ |
※以下では、本稿の前後を合わせて5回分（第12回～第16回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
12. Popupウィジェットでポップアップを表示するには？
ツールヒント／ダイアログ／ポップアップメニューなどのポップアップを、jQuery MobileのPopupウィジェットで手軽に作成する方法を解説する。
13. Popupウィジェットで画像ボックスやダイアログなどを作成するには？
ダイアログ／画像ボックス／ポップアップメニューのような複雑なポップアップを、jQuery MobileのPopupウィジェットで作成する方法を解説する。
14. 【現在、表示中】≫ Tableウィジェットでレスポンシブルなテーブルを作成するには？（Column toggle編）
画面サイズに応じて表示幅を調整してくれるレスポンシブル・テーブル（列を選択的に表示するColumn toggleモード）を、jQuery MobileのTableウィジェットで作成する方法を解説する。
15. Tableウィジェットでレスポンシブルなテーブルを作成するには？（Reflow編）
画面サイズに応じて表示幅を調整してくれるレスポンシブル・テーブル（テーブル／連票と表示形式そのものを切り替えるReflowモード）を、jQuery MobileのTableウィジェットで作成する方法を解説する。
16. Collapsibleウィジェットで開閉可能なパネルを作成するには？
タイトル領域をクリックすることでコンテンツ本体の表示／非表示を切り替えられる「開閉可能パネル」を、Collapsibleウィジェットで簡単に作成する方法を解説する。
