jQueryMobileの設定。その２)

jQuery

ページ内のheaderとfooter部分

一般のWEBサイトはheader部分やfooter部分などはテンプレートページの共通レイアウトエリアとして
レイアウトは編集不可領域とし、情報やデザインが可変するコンテンツ内を編集領域としていました。

スマホなどのモバイルデバイスでは、headerやfooterにページ毎のタイトル（AboutShopやcontactなど）やが表示されたり
カラーが変わるなど動的な表現があります。
PHPを使って可変的にテキストやレイアウトを変える手もありますが、「div data-role="page"」
内に更に「div data-role="~"」を組み入れます。

<div data-role="page" id="index">
  <div data-role="header">
   <h1>topPage</h1>
  </div><!-- header -->
   <p><a href="#about">to-R</a></p>
  <div data-role="footer">
    <h4>&copy; 2011 to-R</h4>
  </div><!-- footer -->
</div>
  
<div data-role="page" id="about">
  <div data-role="header">
   <h1>to-Rについて</h1>
  </div><!-- header -->
   <p><a href="#index">topPage</a></p>
  <div data-role="footer">
    <h4>&copy; 2011 to-R</h4>
  </div><!-- footer -->
</div>

div data-role="~"の~に"header"や"footer"を入れることで
各ページのheaderとfooterを備え付けられます。

ページ毎のカラーレイアウト

div data-role="page" id="about" data-theme="a~e"の中で
data-theme="a~e"のa~eのいずれかを選択することでページのカラーレイアウトを変更できる。