jQuery Mobile の解説

jQuery Mobile の基本的なUIは
ヘッダーとフッター
jQuery Mobile では
page という概念があり、
１つのページに
ヘッダー
コンテンツ
フッター
という構成になります
ページは紙面 data-role=”page”
ヘッダーは見だし data-role=”header”
コンテンツは記事 data-role=”content”
フッターは下の見だし data-role=”footer”
みたいなかんじです
なお page には id をつける必要があります
id は、重複するのはダメなので、被らないように注意が必要です
ソースをちょっと解説用にしてみました
<div id=”ページのID” data-role=”page”>
<div data-role=”header”>
<h1>見だし</h1></div> <!– /header –>
<div data-role=”content”>
内容</div> <!– /content –>
<div data-role=”footer”>
<h2>下のみだし</h2></div> <!– /footer –>
</div> <!– pageの閉じタグ –>
~
フッターには
広告とかのほかに、
戻るボタンとかなどを配置したりします
ちなみに、よくあるスクロールしても
一番下にずっと広告がでるのは、たぶん、フッターに
data-position=”fixed”
がついているからです
ソースにすると
<div data-role=”footer” data-position=”fixed”>
広告じゃなくて、ボタンとかを配置して、常時操作するようにもできます