 |
連載：jQuery Mobile入門 第3回 開閉可能パネル／リスト・ビュー／ナビゲーション・バーを使いこなそう 山田 祥寛2012/03/23 |
|
|
今回は、前回に引き続いてjQuery Mobileで利用できるウィジェットについて解説していく。今回扱うのは、フォーム系以外のウィジェット――開閉可能パネル／リスト・ビュー／ナビゲーション・バー、そして、ヘッダ／フッタである。
■開閉可能なパネルを生成する
スマホ環境では、見出しのみをリスト表示し、コンテンツ部分は開閉を切り替えられると便利だ。これによって、限られた表示領域をより有効に利用できる。
jQuery Mobileでは、こうした開閉可能パネル（Collapsible Panel）の機能を標準で提供している。まずは、具体的なコードとその実行例を見ておこう。
|
|
| 開閉可能パネルの基本的なコード（collapsible.html） | |
 |
|
 |
|
［独習ASP.NET 第3版］という見出しをタップ |
|
|
|
 |
|
| ヘッダ部分をタップすると、コンテンツを開閉できる（上記のコードの実行結果） |
開閉可能パネルを生成するには、以下のルールに従ったマークアップを用意すればよい。
ヘッダ要素（＝「<h1>〜<h6>」）で見出しを用意する
ヘッダ要素のうしろに、コンテンツ本体を用意する
見出しとコンテンツを「<div data-role="collapsible">〜</div>」でくくる
サンプルでは、見出しを<h3>要素でマークアップしているが、<h1>〜<h6>要素のいずれを利用しても外観には影響しない。上位の見出しレベルに応じて、最適なものを利用すればよいだろう。
コンテンツ本体には、取り立ててこれといった決まりはない。ヘッダ要素の後方に、任意のテキスト／要素を記述すればよい。これによって、コンテンツ全体が、以下のような<div>要素で自動的にラップされることになる。
|
|
| jQuery Mobileによってラップされた後のコンテンツ部のコード（出力） |
| ［Note］WAI-ARIA |
|
上のコードに含まれる「aria-〜」という属性に注目してほしい。これは、「WAI-ARIA（Web Accessibility Initiative-Accessible Rich Internet Applications）」の規約に則したコードである。 WAI-ARIAとは、W3Cが提唱する仕様の1つで、Webアプリのアクセシビリティを高めるための技術。具体的には、スクリーン・リーダー（＝画面に表示された情報を音声で読み上げるソフトウェア）などの支援ソフトウェアでも正しくページの情報を理解し、操作できるよう、補足情報を付与するための規約だ。「Accessible Rich Internet Applications」とあることからも、主にRIAを想定している。 jQuery Mobileを利用することで、開発者は意識せずとも、サイトのアクセシビリティを高く保てるわけだ。WAI-ARIAについては、やや古い記事だがThink ITの記事「WAI-ARIAによるアクセシブルRIA」などが分かりやすいので、興味のある方は目を通してみるとよいだろう。 |
パネル全体をくくる「<div data-role="collapsible">〜</div>」*1には、以下のようにdata-collapsed属性を指定することも可能だ。開閉パネルはデフォルトでは閉じた状態で表示されるが、これによってパネルを最初から開いた状態で表示できる。
| *1 このように、ひとまとまりのコンテンツを収納するための要素のことを「コンテナ要素」ともいう。 |
|
|
| 開閉可能パネルの開閉状態を設定するコード |
このコードの実行結果は以下のようになる。
|
| 開閉可能パネルを開いた状態で表示（上記のコードの実行結果） |
●開閉可能パネルのリストを作成する
開閉可能パネルは、もちろん、複数並べることも可能だ。以下は、先の「開閉可能パネルの基本的なコード（collapsible.html）」に対して、さらに4つの開閉可能パネルを追記したコード例（追記部分は太字で表している）と、その実行結果である。
|
|
| 複数の開閉可能パネルを列挙したコード（collapsible2.html） | |
|
|
 |
|
見出しをタップすると、そのコンテンツ部分が開く |
|
|
|
 |
|
| 開閉可能パネルをリストのように並べた結果（上記のコードの実行結果） |
この場合、開閉可能パネルはそれぞれ独立したものであるので、開閉もパネル単位でバラバラに行える。しかし、リスト全体で開いているパネルを1つだけにしたい、というケース（＝あるパネルを開いたら、ほかのパネルは閉じたい）というケースもあるだろう。
そのような場合は、開閉可能パネルのリストを、以下のようにコンテナ要素（一般的には<div>要素）でくくり、「data-role="collapsed-set"」属性を付与すればよい。
|
|
| 開閉パネルのリストをグループ化したコード（accordion.html） |
このコードの実行結果は以下のようになる。
 |
［Windows Azure Platform開発...］見出しをタップ |
|
 |
| リスト内の1つだけが開くアコーディオン式の開閉パネル（上記のコードの実行結果） |
なお、このようなアコーディオン式のパネルを生成する場合は、（構文規則ではないが）原則としてパネル1つを初期で開いた状態にしておく（＝「data-collapsed="false"」属性を付与しておく）のが望ましい*2。アコーディオン・パネルでは、常に1つだけはパネルが開いているのが自然であるからだ。
| *2 複数のパネルに対して「data-collapsed="false"」属性を指定した場合も、エラーにはならず、全てのパネルが開いた状態になるようだ。注意されたい。 |
 |
 |
| INDEX | ||
| ［連載］jQuery Mobile入門 | ||
| 第3回 開閉可能パネル／リスト・ビュー／ナビゲーション・バーを使いこなそう | ||
 |
1．開閉可能なパネルを生成する | |
| 2．ネイティブ・アプリ・ライクなリストを生成する | ||
| 3．ナビゲーション・バー／ヘッダやフッタの挙動を制御する | ||
 |
||
 |
「連載：jQuery Mobile入門」 |
- 第2回 簡潔なコーディングのために （2017/7/26）
ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている - 第1回 Visual Studio Codeデバッグの基礎知識 （2017/7/21）
Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう - 第1回 明瞭なコーディングのために （2017/7/19）
C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える - Presentation Translator （2017/7/18）
Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
 |
|
|
|
|
- - PR -
注目のテーマ
業務アプリInsider 記事ランキング
転職／派遣情報を探す
