jQueryMobile カスタマイズ０４

スマートフォン 授業



ボタンの数


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


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

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

ソースコード【 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" 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></html>


ブラウザで表示【 Safari 】









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

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

ソースコード【 HTML 】

<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" data-id="footerID">
<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" data-id="footerID"><h4>フッター2</h4></div>
</div>
</body>


ブラウザで表示【 Safari 】