カスタマイズ

見出しのテーマの変更

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

<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>

sample17

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

<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>

sample18

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

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

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

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

<body>
<div  data-role="page" id="page1"> 
	<div data-role="header"><h1>ページ1</h1></div>
	<div data-role="content">コンテンツ1<br><a href="#page2">ページ2</a></div>
	<div data-role="footer"><h4>フッター1</h4></div>
</div>
<div  data-role="page" id="page2" data-add-back-btn="true"> 
	<div data-role="header"><h1>ページ2</h1></div>
	<div data-role="content">コンテンツ2</div>
	<div data-role="footer"><h4>フッター2</h4></div>
</div>
</body>

sample19

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

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

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

ボタンの追加

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

<body>
<div  data-role="page" id="page1"> 
	<div data-role="header">
		<a href="#page2">home</a>
		<h1>ページ1</h1>
		<a href="#page2">save</a>
	</div>
	<div data-role="content">コンテンツ1</div>
	<div data-role="footer"><h4>フッター1</h4></div>
</div>
<div  data-role="page" id="page2"> 
	<div data-role="header"><h1>ページ2</h1></div>
	<div data-role="content">コンテンツ2</div>
	<div data-role="footer"><h4>フッター2</h4></div>
</div>
</body>

sample20

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

<body>
<div  data-role="page" id="page1"> 
	<div data-role="header">
		<h1>ページ1</h1>
		<a href="#page2" class="ui-btn-right">save</a>
	</div>
	<div data-role="content">コンテンツ1</div>
	<div data-role="footer"><h4>フッター1</h4></div>
</div>
<div  data-role="page" id="page2"> 
	<div data-role="header"><h1>ページ2</h1></div>
	<div data-role="content">コンテンツ2</div>
	<div data-role="footer"><h4>フッター2</h4></div>
</div>
</body>

sample21

フッターにボタンを追加

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

<body>
<div  data-role="page" id="page1"> 
	<div data-role="header">
		<h1>ページ1</h1>
	</div>
	<div data-role="content">コンテンツ1</div>
	<div data-role="footer">
	<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> 
</div>
<div  data-role="page" id="page2"> 
  <div data-role="header"><h1>ページ2</h1></div>
  <div data-role="content">コンテンツ2</div>
  <div data-role="footer"><h4>フッター2</h4></div>
</div>
</body>

sample22

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

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

<body>
<div  data-role="page" id="page1"> 
  <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>
  <div data-role="content">コンテンツ1</div>
  <div data-role="footer"><h4>フッター1</h4></div>
</div>
<div  data-role="page" id="page2"> 
  <div data-role="header"><h1>ページ2</h1></div>
  <div data-role="content">コンテンツ2</div>
  <div data-role="footer"><h4>フッター2</h4></div>
</div>
</body>

sample23

<body>
<div  data-role="page" id="page1"> 
  <div data-role="header">
  <h1>ページ1</h1>
  </div>
  <div data-role="content">コンテンツ1</div>
  <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>
</div>
<div  data-role="page" id="page2"> 
  <div data-role="header"><h1>ページ2</h1></div>
  <div data-role="content">コンテンツ2</div>
  <div data-role="footer"><h4>フッター2</h4></div>
</div>
</body>

sample24

ボタンの数

ナビゲーションバーはボタンの数（li要素の数）で均等に分割され、数が増えるにつれてボタンは小さくなります
ボタンの数（li要素の数）が6つ以上になると1行に2列ずつ、複数行に分割して表示されます

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

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

<body>
<div  data-role="page" id="page1"> 
  <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">list4</a></li>
      <li><a href="#page2">list5</a></li>
      <li><a href="#page2">list6</a></li>
      <li><a href="#page2">list7</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>
</div>
<div  data-role="page" id="page2"> 
  <div data-role="header"><h1>ページ2</h1></div>
  <div data-role="content">コンテンツ2</div>
  <div data-role="footer"><h4>フッター2</h4></div>
</div>
</body>

sample25

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

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

sample26

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

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

<body>
<div  data-role="page" id="page1"> 
  <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">list4</a></li>
      <li><a href="#page2">list5</a></li>
      <li><a href="#page2">list6</a></li>
      <li><a href="#page2">list7</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>
</div>
<div  data-role="page" id="page2"> 
  <div data-role="header"><h1>ページ2</h1></div>
  <div data-role="content">コンテンツ2</div>
  <div data-role="footer"><h4>フッター2</h4></div>
</div>
</body>