jQueryMobile のソースメモ
jQueryMobileでは、divタグへ設定するdata-roleでモバイル向けのパーツを構成している
<div data-role="page" id="p-top"> </div>
この
data-role=”page”部分がページ1ページ、HTMLファイル1画面分になる
id=”” は、ページのidで
これを使いページを切り替えたりする
<div data-role="header"> <h1>タイトル</h1> </div>
data-role=”header”
この部分がヘッダー定義
ipod touchとかでモバイル向け画面開いたとき
一番上の黒くなっている題名とかブログ名部分になるは h1タグで設定する
<div data-role="content"> <h2>本文</h2> <p>テキスト</p> </div>
data-role=”content”
これは、コンテンツの中身部分
HTMLのbody部分にあたる
表示したい内容はここに書くことになる
<div data-role="footer"> <p>copyright</p> </div>
data-role=”footer”
ここは、フッター部分になり
copyrightとか、Twitterのアプリで
メニューを並べたりしている
個人的には、フッター部分へ
メニューやボタンがあったほうが操作しやすい
bodyの中の全体的なソースは
<div data-role="page"> <div data-role="header"> <h1>タイトル</h1> </div> <div data-role="content"> <h2>テキスト</h2> <p>本文</p> </div> <div data-role="footer"> <p>copyright</p> </div> </div>