見出しのテーマの変更

　jQuery Mobileのリスト表示は、ul/ol要素にdata-theme属性でテーマを指定できます。

■サンプル26[HTML]

<ul data-role="listview" data-theme="e">
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
</ul>

リストのテーマを変更した状態

　data-theme属性はul/ol要素の子要素であるli要素にも指定できます。li要素にdata-theme属性を設定すると、個々のリスト項目のテーマを変更できます。

■サンプル27[HTML]

<ul data-role="listview">
  <li><a href="#page2">list</a></li>
  <li data-theme="e"><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
</ul>

個々のリスト項目のテーマも変更できる

ヘッダー／フッターのカスタマイズ

　data-role="header、data-role="footer"で表示したヘッダー／フッターは以下のようにカスタマイズできます。

「戻るボタン」の表示　data-add-back-btn属性「true」

　ページ要素（data-role="page"）にdata-add-back-btn属性「true」を指定すると、他のページから遷移してきたときに自動的に「戻るボタン」を表示します。

■サンプル28[HTML]

<div data-role="page" id="page2" data-add-back-btn="true"> 

ページ遷移後に表示される「戻るボタン」

「戻るボタン」のテキストの変更　data-back-btn-text属性

　「戻るボタン」は、デフォルトでは「back」というテキストが表示されます。ボタンのラベルを任意のテキストに変更するには、ページ要素にdata-back-btn-text属性で表示したいテキストを指定します。

■サンプル29[HTML]

<div data-role="page" id="page2" data-add-back-btn="true" data-back-btn-text="戻る">

「戻るボタン」のテキストは任意のテキストが設定できる

ボタンの追加

　ヘッダーには「戻るボタン」以外にも任意のボタンを表示できます。data-role属性「header」を指定した要素内にa要素を記述すると、ボタンとして表示されます。サンプル30では2つのa要素を追加し、それぞれの要素内に「home」「save」というテキストを記述してボタンにしています。

■サンプル30[HTML]

<div data-role="header">
  <a href="#page2">home</a>
  <h1>ページ1</h1>
  <a href="#page2">save</a>
</div>

ヘッダーには任意のボタンを配置できる

　特に指定しない場合、1つ目のa要素がヘッダーのテキストの左側に、2つ目のa要素が右側に表示されます。ボタンを必ず右側に表示したい場合は、class属性「ui-btn-right」を指定します。

■サンプル31[HTML]

<div data-role="header">
<h1>ページ1</h1>
<a href="#page2" class="ui-btn-right">save</a>
</div>

ヘッダーの右に配置したボタン

フッターにボタンを追加

　フッター内に配置したa要素も自動的にボタンに変換されます。ただし、初期値では余白などが反映されていないため、フッター要素の内側に新たな要素を作成し、class属性「ui-bar」を指定します。

■サンプル32[HTML]

<div data-role="footer" class="ui-bar">
  <div class="ui-bar">
    <a href="#page2">Remove</a>
    <a href="#page2">Add</a>
    <a href="#page2">Up</a>
    <a href="#page2">Down</a>
  </div>
</div> 

フッターに配置したボタン

ナビゲーションバーの追加　data-role属性「navbar」

　data-role属性「navbar」を利用すると、ヘッダーやフッターにナビゲーションバーを追加できます。サンプル33ではヘッダーに、サンプル34ではフッターにナビゲーションバーを表示しています。ナビゲーションバーに表示するボタンは、data-role属性「navbar」を付けた要素の内側にリスト（ul/li要素）で記述します。

■サンプル33[HTML]

<div data-role="header">
  <h1>ページ1</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#page2">One</a></li>
      <li><a href="#page2">Two</a></li>
    </ul>
  </div>
</div>

ヘッダーに追加したナビゲーション

■サンプル34[HTML]

<div data-role="footer">
  <div data-role="navbar">
    <ul>
      <li><a href="#page2">One</a></li>
      <li><a href="#page2">Two</a></li>
    </ul>
  </div>
</div>

フッターに追加したナビゲーション

　ナビゲーションバーはボタンの数（li要素の数）で均等に分割され、数が増えるにつれてボタンは小さくなります。

		ボタンの数が増えると1つ1つのボタンのサイズは小さくなる

　ボタンの数（li要素の数）が6つ以上になると1行に2列ずつ、複数行に分割して表示されます。

ボタンの数が6つ以上になると行が拡張される

フッター／ヘッダーの固定配置　data-position属性「fixed」

　data-position属性「fixed」を利用すると、ヘッダーやフッターの表示を固定できます。長いページでもヘッダーやフッターが常に表示されている状態になります。

■サンプル40[HTML]

<div data-role="header" data-position="fixed">
  <h1>ページ1</h1>
</div> 
<div data-role="content">
  <ul data-role="listview">
    <li><a href="#page2">list1</a></li>
    <li><a href="#page2">list2</a></li>
    <li><a href="#page2">list3</a></li>
    (中略)
    <li><a href="#page2">list8</a></li>
    <li><a href="#page2">list9</a></li>
    <li><a href="#page2">list10</a></li>
  </ul>
</div>
<div data-role="footer" data-position="fixed">
  <h4>フッター1</h4>
</div>

		ヘッダー、フッターを固定するとスクロール中いったん非表示になるが、スクロールが終わると再びヘッダーとフッターが表示される

　ユーザーがページをスクロールさせると、ヘッダー／フッターがフェードアウトして一時的に非表示になり、スクロールが止まるとフェードインで再度表示されます。

共通フッターの使用　data-id属性

　data-position="fixed" でフッターを固定しているときにdata-id属性を設定すると、共通フッターを使用できます。共通フッターとは、サイト内の各ページに共通して表示されるフッターのことで、ページ遷移時にもアニメーションせずに固定され、常にページ下部に表示されます。

　data-id属性にはID名（フッターID）を指定し、共通フッターを使用したいページには同じフッターIDをフッターに記述します。

■サンプル41[HTML]

<div data-role="footer" data-position="fixed" data-id="フッターID"><h4>フッター</h4></div>

		共通フッターを利用している場合はアニメーション時もフッターが固定される

フルスクリーンモード　data-fullscreen属性「true」

　ヘッダー／フッターを固定配置した状態（data-position="fixed"）でページ要素にdata-fullscreen属性「true」を指定すると、フルスクリーンモードを利用できます。フルスクリーンモードでは、ヘッダー／フッターがコンテンツの上に半透明で重なって表示され、コンテンツ領域をタップすると非表示になります（もう一度タップすると再表示されます）。

■サンプル42[HTML]

  <div data-role="page" id="page1" data-fullscreen="true"> 
    <div data-role="header" data-position="fixed">
      <h1>ページ1</h1>
    </div>
    <div data-role="content">
       <h2>小見出し</h2>
       <p>本文</p>
       <h2>小見出し</h2>
       <p>本文</p>
    </div>
    <div data-role="footer" data-position="fixed">
      <h4>フッター1</h4>
    </div>
  </div>

フルスクリーンモードでは全画面でコンテンツが表示され、コンテンツをタップするとフッター／ヘッダーが非表示になる

◆

　次回はjQuery Mobileのそのほかの機能、グリッドレイアウト、開閉パネル、フォーム要素について解説します。