jqMobi 1.0のはじめかた(ページ構造編)
まずjqMobiというかjqUiのページ構造を理解しよう。
前回のサンプル見ながらだとわかりやすいはず。
基本構造
#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ってタグそのものとか、よく使うクラス名とか使ってくれちゃってるのよね。いろいろとめんどくさい。。