jQueryMobile のソースメモ

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>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です