Webサイト制作科 - 作品紹介

Webサイト制作科 - 作品紹介

jQMまとめ - ヘッダー

JQM

ヘッダーの基本

ページのコンテナ要素の直下にヘッダー用のコンテナを用意し、data-role属性「header」を記述します

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-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">
<div data-role="header">

</div>
</div>
</body>
</html>

長いページタイトルの場合

自動的に調整されます

<body>
<div data-role="page">
<div data-role="header">
<h1>長いページタイトルの場合</h1>
</div>
<div data-role="content">
<p>コンテンツ</p>
</div>
</div>
</body>

ボタンの設置

ヘッダー内の最初のボタンは「左端」に、２番めは「右端」に配置されます

<body>
<div data-role="page">
<div data-role="header">
<h1>ページタイトル</h1>
<a href="/">ボタン1</a>
<a href="/">ボタン2</a>
</div>
<div data-role="content">
<p>コンテンツ</p>
</div>
</div>
</body>

右端のみに配置したい場合

<body>
<div data-role="page">
<div data-role="header">
<h1>ページタイトル</h1>
<a href="/" class="ui-btn-right">ボタン1</a>
</div>
<div data-role="content">
<p>コンテンツ</p>
</div>
</div>
</body>

「戻る」ボタンを設置

同一サイト内の履歴が直近にない場合は、「戻る」ボタンは表示されません

<body>
<div data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>ページタイトル</h1>
</div>
<div data-role="content">
<p>コンテンツ</p>
</div>
</div>
</body>

日本語で表示

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

ボタンのテーマを変更

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

バリエーション

<body>
<div data-role="page">
<div data-role="header">
<h1>ページタイトル</h1>
<a href="/" data-icon="home" data-iconpos="notext" data-direction="reverse">ホーム</a>
<a href="/" data-icon="gear" data-theme="b">設定</a>
</div>
<div data-role="content">
<p>コンテンツ</p>
</div>
</div>
</body>

ヘッダーのテーマ

適用させたい要素に記述します

<body>
<div data-role="page">
<div data-role="header" data-theme="e">
<h1>ページタイトル</h1>
<a href="/" data-icon="home" data-iconpos="notext" data-direction="reverse">ホーム</a>
<a href="/" data-icon="gear" data-theme="b">設定</a>
</div>
<div data-role="content">
<p>コンテンツ</p>
</div>
</div>
</body>

ヘッダーにナビゲーションを付ける

<body>
<div data-role="page">
<div data-role="header">
<h1>ページタイトル</h1>
<a href="/" data-icon="home" data-iconpos="notext" data-direction="reverse">ホーム</a>
<a href="/" data-icon="gear" data-theme="b">設定</a>
<div data-role="navbar">
<ul>
  <li><a href="/" class="ui-btn-active">ページA</a></li>
  <li><a href="/">ページB</a></li>
  <li><a href="/">ページC</a></li>
  <li><a href="/">ページD</a></li>
</ul>
</div>
</div>
<div data-role="content">
<p>コンテンツ</p>
</div>
</div>
</body>

ヘッダーを画面上部に固定

<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>ページタイトル</h1>
<a href="/" data-icon="home" data-iconpos="notext" data-direction="reverse">ホーム</a>
<a href="/" data-icon="gear" data-theme="b">設定</a>
</div>
<div data-role="content">
  <ul data-role="listview">
    <li><a href="/">ページ1</a></li>
    <li><a href="/">ページ2</a></li>
    <li><a href="/">ページ3</a></li>
    <li><a href="/">ページ4</a></li>
    <li><a href="/">ページ5</a></li>
    <li><a href="/">ページ6</a></li>
    <li><a href="/">ページ7</a></li>
    <li><a href="/">ページ8</a></li>
    <li><a href="/">ページ9</a></li>
    <li><a href="/">ページ10</a></li>
  </ul>
</div>
</div>
</body>

ヘッダーをフルスクリーンモードにする

ページをタップすることでヘッダー表示の ON/OFF を切り替えることができます

<body>
<div data-role="page" data-fullscreen="true">
<div data-role="header" data-position="fixed">
<h1>フルスクリーンヘッダー</h1>
</div>
<div data-role="content">
<img src="bg.jpg">
</div>
</div>
</body>