jQueryのモバイルツールバー
ツールバーの要素は、多くの場合、ヘッダーとフッターの内側に配置されている - 「簡単アクセス」ナビゲーションのために：
ヘッダーバー
ヘッダは、ページの上部に位置しており、通常はページタイトル/ロゴまたは1つまたは2つのボタンを含んで（一般的に家庭、オプションまたは検索）されています。
あなたは左および/またはヘッダの右側にボタンを追加することができます。
以下のコードは、ヘッダのタイトルテキストの右に左に「ホーム」ボタンをクリックし、「検索」ボタンを追加します。
例
<div data-role="header">
<a href="#"
class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div> »それを自分で試してみてください 次のコードは、ヘッダのみのタイトルの左側にボタンを追加します：
例
<div data-role="header">
<a href="#"
class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div> »それを自分で試してみてください 次のコードは、ヘッダのみのタイトルの右側にボタンを追加します：
例
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#"
class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div> »それを自分で試してみてください フッターは制限はありませんしながら、ヘッダは、1つまたは2つのボタンを含めることができます。
フッターバー
フッターがページの下部に位置しています。
フッターには、ヘッダーよりも柔軟である - それは、ページ全体でより多くの機能と変更可能であり、必要な数のボタンを、したがって含めることができます。
例
<div data-role="footer">
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div> »それを自分で試してみてください ヒント：フッターのボタンは、デフォルトではセンタリングされていません。 この問題を解決するには、CSSを使用します。
あなた水平または垂直フッターにすることもでき、グループボタン：
例
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup"
data-type="horizontal" >
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div> »それを自分で試してみてください ポジショニングヘッダーとフッター
ヘッダーとフッターの3つの方法で配置することができます。
- Inline -デフォルト。 ヘッダーとフッターは、ページのコンテンツとインラインであります
- Fixed -ヘッダとフッタは、ページの上部と下部に配置されたままになります
- Fullscreen -固定のように振る舞います。 ヘッダーとフッターはなく、ページコンテンツの上に、上部と下部に配置されたままになります。 また、少しシースルーれます
あなたのヘッダーとフッターを配置するために、データ位置属性を使用します。
インライン位置（デフォルト）
<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> »それを自分で試してみてください フルスクリーンの位置を有効にするには、使用データ-位置は=「固定」と要素にデータをフルスクリーンの属性を追加します。
フルスクリーンの位置
<div data-role="header"
data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer"
data-position="fixed" data-fullscreen="true" ></div> »それを自分で試してみてください ヒント：フルスクリーンの位置が写真、画像や動画に最適です。
ヒント：画面をタップすると、両方の固定およびフルスクリーンの位置のためのヘッダーとフッターを非表示にし、表示されます。
その他の例
ツールバーにアイコンだけを表示します
使用してui-btn-icon-notextのみのヘッダーとフッターのボタンにアイコンを表示するクラスを。