jQuery Mobile ツールバー

jQuery Mobile ツールバー

ツールバー要素は、「簡単にアクセスできる」ナビゲーションのために、ヘッダーとフッターの内側に配置されることがよくあります：

ヘッダー・バー

ヘッダーはページの上部にあり、通常、ページタイトル/ロゴや 1 つか 2 つのボタン（通常はホーム、オプションや検索）が含まれます。

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

下のコードは、ヘッダー・タイトル・テキストの左側に「ホーム」ボタンを追加し、右側に「検索」ボタンを追加しています：

following code will only add a button to the left side of the header title:

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

フッター・バー

フッターは、ページの下部に配置します。

フッターは、ヘッダーより柔軟です。ページ全体を通してより機能的で変更可能です。したがって、必要な数のボタンを含むことができます：

チップ: フッター内のボタンは、デフォルトで中央揃えではありません。 これを修正するには、単純に CSS を使用します：

フッターのボタンを横や縦にグループ化することもできます：

ヘッダーとフッターの配置

ヘッダーとフッターは、次の3つの方法で配置できます：

• インライン - デフォルト。 ヘッダーとフッターはページのコンテント一緒にインラインで表示されます
• 固定 - ヘッダーとフッターはページの上部と下部に配置されたままになります
• 全画面 - fixed のように動作します；ヘッダーとフッターは上部と下部のみならずコンテンツの上にも配置されたままになります。 コンテンツ上では、薄く透けて見えます

ヘッダーとフッターを配置するには、data-position 属性を使用します：

全画面配置を有効にするには、data-position="fixed" を使用し、要素に data-fullscreen 属性を追加します：

チップ: 全画面配置は、写真、画像、ビデオには最適です。

チップ: 画面をタップすると、固定配置と全画面配置の両方のヘッダーとフッターが非表示や表示になります。

その他の例

ツールバーにアイコンのみを表示する
ヘッダーとフッターのボタンにアイコンのみを表示するために ui-btn-icon-notext クラスを使用する。