jQueryMobile カスタマイズ０２

スマートフォン 授業



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


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


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


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


ソースコード【 HTML 】

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<title>jQuery Mobile Sample</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>

</head>
<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>
</html>

ブラウザで表示【 Safari 】










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

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

ソースコード【 HTML 】

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

ブラウザで表示【 Safari 】







ボタンの追加

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


ソースコード【 HTML 】

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

ブラウザで表示【 Safari 】








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


ソースコード【 HTML 】

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

ブラウザで表示【 Safari 】