jQuery Mobileはどう使うのか設計意図通りなのか、意外と分かり難い
はじめに
今日のは愚痴というか、学習過程のメモというか。
環境
- jQuery Mobile 1.2(今回は1.1でも通用するような話題です)
最初の想像していたこと
jQuery Mobileを学び始めた頃は、以下のように思っておりました。
- 基本的にdata-属性でマークアップしていったら、良い感じに画面が作れる。
- テーマは何か1個選んで使う。
data-属性だけでは上手くできないことが意外と色々あるっぽい
ヘッダのカスタマイズについて調べていて以下のページを読みました。
結果、以下のことに衝撃を受けました。
- さらっと「class属性に○○を指定する」という話が出てくる
- それどころか、最大限にカスタマイズする場合、data-roleを使わずにヘッダを作っている。
てっきり「data-属性で画面をマークアップする」が設計意図だと思っていたのに、公式ドキュメントで「それだけでは、細かいことは無理」というのをあっさり認めてしまっていると言う辺りが、なかなか衝撃的でした。
とはいえ、「じゃあ、data-属性を使わなくて良いの？」とか考え出すと以下が気になるわけですが、そこについては明確な答えを発見できず「ううーん」となるのです。
- data-roleの役割は、classを付与することだけなんだろうか。jQuery Mobileのソースを見るとWAI-ARIA用の属性付与も行っているように見えるのだが……。
- 直接class属性を付与しまくった画面を作ったら、jQuery Mobileのバージョンアップの時に苦労したりしないのだろうか？
テーマは複数選んで1画面の中で使い分ける想定っぽい
フォーム部品について調べていて、以下のページを読みました。
ここで画面下部に注目です。
「Cancel」と「Submit」の色が異なっています。
「ありがちな要件だよなぁ」と思ってソースを見たら、ボタン毎にテーマを変えてありました。
別のページ(「jQuery Mobile Docs - Theming Pages」)に以下のように書いてあるから、てっきり「好きなテーマを選んでね」という仕様だと思っていたのに。
While the data-theme attribute could be added to the content container, we recommend adding it instead to div or container that has been assigned the data-role="page" attribute to ensure that the background color is applied to the full page.
まあ、もっとも、「好きなテーマを一つ選んで使おう」とどこかに書いてあるわけでもない(私には発見できなかった)ので、私の思い込みだった言ってしまえるわけですが。
さいごに
class属性を使ったり、１画面に複数テーマを入れたりするのに私は抵抗があったのですが、良いか悪いかはともかく、抵抗が減りました。
現場の知恵的なものかと最初思っていたのですが、公式ドキュメントでそうしているんだもの。
