jqMobi 1.0のはじめかた(ページ構造編)

まずjqMobiというかjqUiのページ構造を理解しよう。
前回のサンプル見ながらだとわかりやすいはず。

基本構造

f:id:jhoshina:20120322234345p:plain

#jQUi

親となるコンテナ。

#header

タイトルや操作ボタンが入る要素。ただし、自分でタイトルを入れてはいけない。後述の.panelのtitle要素がここに入る。ページ遷移した際には戻るボタンが勝手に追加されたり。

#content

ページ要素(.panel)がここに入る。複数ページの場合、ここに複数の.panelが入る。

.panel

ページ要素。これにひとつのコンテンツを入れる。jQuery Mobileでいう[data-role="page"]にあたる。
ページ間の遷移はこのパネルにIDを付けて実現する。
title属性を付けてやると、このパネルに遷移したときにtitle属性が#headerにh1要素として入る。
んで、data-*とかつけていろいろと挙動を変更できる。くやしくはWebで!

#navbar

フッター的なもの。アイコンとかはicon.cssが実現しているものなので特別なものはない。

nav

サイドメニュー。Facebookアプリとかで使われてる「にゅん!」って横から出るやつ。$.ui.toggleNavMenu()で開け閉め可能。
…って、navタグそのまま使っちゃうんすかΣ(゚Д゚;

わりとjqUiってタグそのものとか、よく使うクラス名とか使ってくれちゃってるのよね。いろいろとめんどくさい。。