jQuery Mobile ツールバー

jQuery Mobile ツールバー

ツールバー要素は、ヘッダーやフッターに配置されることが多いです - 「アクセス済み」のナビゲーションを実現するためです：

タイトルバー

ヘッダーは通常、ヘッダータイトル/LOGO または一つから二つのボタン（通常はホーム、オプション、または検索ボタン）を含みます。

ヘッダーには、左側または/および右側にボタンを追加することができます。

以下のコードは、ヘッダータイトルのテキストの左側にボタンを追加し、右側にもボタンを追加します：

例

<div data-role="header">
  <a href="#" data-role="button">ホーム</a>
  <h1>こんにちは、私のホームページへようこそ</h1>
  <a href="#" data-role="button">検索</a>
</div>

実際に試してみてください

以下のコードは、ヘッダータイトルの左側にボタンを追加します：

<div data-role="header">
  <a href="#" data-role="button">ホーム</a>
  <h1>こんにちは、私のホームページへようこそ</h1>
</div>

ただし、<h1>要素の後にボタンリンクを配置すると、テキストの右側に表示されません。ヘッダータイトルの右側にボタンを追加するには、クラス名 "ui-btn-right" を指定してください：

例

<div data-role="header">
  <h1>こんにちは、私のホームページへようこそ</h1>
  <a href="#" data-role="button" class="ui-btn-right">検索</a>
</div>

実際に試してみてください

ヒント：ページヘッダーは一つまたは二つのボタンを含むことができますが、フッターには制限はありません。

フッターバー

ページヘッダーよりも、フッターは柔軟性が高く - 実用的で多様で、必要な数のボタンを含むことができます：

例

<div data-role="footer">
  <a href="#" data-role="button">新浪微博に転送</a>
  <a href="#" data-role="button">腾讯微博に転送</a>
  <a href="#" data-role="button">QQ空間に転送</a>
</div>

実際に試してみてください

注記：フッターとヘッダーのスタイルは異なります（内余白やスペースが少し削られ、ボタンは中央に配置されません）。この問題を修正するには、フッターにクラス名"ui-btn"を設定してください：

例

<div data-role="footer" class="ui-btn">

実際に試してみてください

フッターにボタンを水平か垂直に配置することもできます：

例

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">新浪微博に転送</a>
    <a href="#" data-role="button" data-icon="plus">腾讯微博に転送</a>
    <a href="#" data-role="button" data-icon="plus">QQ空間に転送</a>
  </div>
</div>

実際に試してみてください

ヘッダーやフッターの定位

ヘッダーやフッターの配置方法は3種類あります：

  • インライン - デフォルト。ヘッダーやフッターはページ内容と行内に配置されます。
  • 固定 - ページとフッターはページの顶部と底部に残ります。
  • フルスクリーン - fixedと同様ですが、ページとフッターはページの内容を越えてもページの顶部と底部に残ります。また、少し透けて見えます

ヘッダーやフッターの定位にはdata-position属性を使用してください：

インライン定位（デフォルト）

<div data-role="header"> data-position="inline"</div>
<div data-role="footer"> data-position="inline"</div>

実際に試してみてください

固定定位

<div data-role="header"> data-position="fixed"</div>
<div data-role="footer"> data-position="fixed"</div>

実際に試してみてください

全面定位を有効にする場合は、data-position="fixed"を使用し、その要素にdata-fullscreen属性を追加してください：

フルスクリーン定位

<div data-role="header" data-position="fixed"> data-fullscreen="true"</div>
<div data-role="footer" data-position="fixed"> data-fullscreen="true"</div>

実際に試してみてください

ヒント：フルスクリーンは写真、画像、ビデオにとって非常に理想的です。

ヒント：fixed と fullscreen の位置設定では、タッチスクリーンでヘッダーおよびフッターを隠すおよび表示します。