jQuery Mobile ページを構成するUI要素(ウィジェット)の指定方法

公開日：2014年10月10日
最終更新日：2014年11月8日

jQuery Mobile では、HTML要素が Webページ上でどのような役割を持っているか HTML5のデータ属性を使って指定します。そしてそれらの要素に対してオプションを指定するデータ属性やスタイルを適用するクラスを指定することによりページを制作していきます。

«次の特集記事» jQuery Mobile ウィジェットにオプションを指定するデータ属性
«前の特集記事» jQuery Mobile １つのHTMLファイルに複数ページを記述する

jQuery Mobile 特集記事一覧

【コンテンツ】

指定方法の基本
data-role属性でウィジェットを定義する
data-role属性を使わないウィジェット
その他のデータ属性でウィジェットにオプションを指定する
クラスでウィジェットにスタイルを適用する

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

指定方法の基本

Webページを構成するUI要素を、jQuery Mobile ではウィジェット(Widget)と呼んでいます。パーツや element と呼んでいる場合もありますが、同じ意味ととらえても構いません。

ボタン、リスト、フォーム、ダイアログなど、すべてウィジェットです。ヘッダー、フッターもウイジェットであり、ページ自体もウィジェットの一種です。

HTML要素にウィジェットを指定し、それらにスタイルをつけたり機能を与えたりするのに、jQuery Mobile では「HTML5のデータ属性」と「CSSクラス指定」を使います。

ただしウィジェットによって指定方法が多少異なる部分がありますので注意します。

data-role属性でウィジェットを定義する

Webページをマークアップするときは HTML要素を記述していきますが、HTML5では nav, header, footerなど用いるタグ自体に意味を持たせる傾向が強くなっています。
しかしそれ以前のHTMLではソースを見ただけではよく分からないこともあります。

jQuery Mobile では、HTML要素に data-role属性を付与して役割を割り当て、その要素がどの種類のウィジェットか定義します。「data-role="page"」と指定するとページウィジェットであり、「data-role="header"」と指定するとヘッダーウィジェットになります。

なおどのウィジェットも必須ではありません。
第1回記事「jQuery Mobile 使用する環境を整える」でページ、ヘッダー、コンテンツ、フッターを body要素に定義することを説明しましたが、いずれもなくて構いません。ページウィジェットさえ現在では必須でなくなっています。

またサンプルでは div要素に data-role属性を指定するケースが多いのですが、他の HTML要素でも全く構いません。「<header data-role="header">」と記述してもOKです。

data-role属性で指定する各ウィジェットを以下に示します。

ウィジェット	指定方法
ページ	data-role="page"
ヘッダー	data-role="header"
フッター	data-role="footer"
ナビゲーションバー	data-role="navbar"
タブ	data-role="tabs"
リスト	data-role="listview"
ポップアップ	data-role="popup"
パネル	data-role="panel"
開閉式コンテンツ	data-role="collapsible"
開閉式コンテンツのセット	data-role="collapsible-set"
テーブル	data-role="table"
コントロールグループ	data-role="controlgroup"
フリップスイッチ	data-role="flipswitch"
レンジスライダー	data-role="rangeslider"

data-role属性を使わないウィジェット

ウィジェットでも data-role属性を使わない場合があります。

コンテンツ

コンテンツ部分を表すために、以前のバージョンでは「data-role="content"」と指定しましたが、バージョン1.4では「role="main" class="ui-content"」と指定します。

ボタン

ボタンも以前は「data-role="button"」と指定しましたが、「class="ui-btn"」とクラス指定に変更になっています。

ダイアログ

ダイアログは a要素に「data-rel="dialog"」と指定します。
ただしこの方法はバージョン1.4では非推奨になっており、ダイアログは今後ポップアップで実現することを推奨しています。

フォーム部品

テキスト入力、チェックボックス、送信ボタンなどフォーム部品の多くは、何も指定しなくてもjQuery Mobile のスタイルが自動的に適用されます。

グリッドレイアウト

グリッドレイアウトを構成する場合は、ブロックとなる要素にクラスを指定します。

その他のデータ属性でウィジェットにオプションを指定する

HTML5のデータ属性は data-role だけでなく、その他オプション用に用意されているものもあります。それらはウィジェットにスタイルを指定したり、何らかの機能を与えるときに使います。例えば、「data-theme="b"」はテーマBの使用を指定します。

ウィジェットごとに使えるデータ属性は決まっているので、以下のページを参照してください。
http://api.jquerymobile.com/data-attribute/

データ属性の詳細は別の記事で解説します。

クラスでウィジェットにスタイルを適用する

ウィジェットにスタイルを適用するクラスが用意されています。
どのウィジェットにも共通で使えるクラスと、特定のウィジェット用のクラスがあります。

バージョン1.4から、ボタンはデータ属性ではなく、すべてクラスでデザインをするようになっています。
また jQuery Mobile に内包されているアイコンを表示するときもクラスで指定します。

どのようなクラスがあるかは、以下のページを参照してください。
http://api.jquerymobile.com/classes/

クラスの詳細は別の記事で解説します。

jQuery Mobile の HTML要素に対する指定方法は、まだ完全に整理された段階ではないと感じます。そのため例外も多少あり、今後も仕様が変わっていく可能性があります。
こういうフレームワークにはよくありがちですが、バージョンが進むにつれて非推奨になっている仕様もありますので、最新情報をウォッチしておく必要があります。

«次の特集記事» jQuery Mobile ウィジェットにオプションを指定するデータ属性
«前の特集記事» jQuery Mobile １つのHTMLファイルに複数ページを記述する

jQuery Mobile 特集記事一覧