HTML 5モバイルWebアプリケーションの開発—JQuery Mobile(2)-ナビゲーションバーとフッター

ナビゲーションバー部分のコードは、data-roleがheaderであるdivの中に一般的に配置されます.

<div data-role="header">
    <a href="#" data-role="button" data-icon="home">  </a>
    <h1>        </h1>
    <a href="#" data-role="button" data-icon="search">  </a>
  </div>

1つの基本的なナビゲーションバーコードには、2つのボタンと1行の文字がタイトルとして含まれています.Data-iconは、ボタンに対応する小さなアイコンを定義できます.テキストの右側にボタンを配置する場合は、class=「ui-btn-right」スタイルを追加できます.Jquery Mobileのナビゲーションセクションには、2つのボタンしか含まれていないことに注意してください.(一般的な携帯電話のアプリナビゲーションではbuttonがあまり多くなく、フッターに置かれていることが想像できます)
対照的に、フッターのボタン数は制限されず、フッターはfooterに配置され、基本コードは以下の通りです.

<div data-role="footer">
    <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>

これは一般的なモバイルapp設計モードに合致し、下部は異なるページに切り替えるbuttonである.ページを切り替える方法も簡単で、ここの各buttonはaラベルで定義されていることに気づきました.hrefは私たちが前回言ったように、hrefの後ろに別のページのid(data-roleはpageのdiv)を追加すればジャンプになります.ジャンプの過程にはjquery mobileに定義されたアニメーション効果がたくさんありますが、後で紹介します.
ヘッダーとフッターについては、上述した以外にdata-positionプロパティを使用して、次の3つのオプション値(w 2 cschoolから)を含む位置プロパティを定義することもできます.
Inline-デフォルト.ヘッダーとフッターとページの内容は行内にあります.
Fixed–ヘッダーとフッターは、ページの上部と下部に残ります.
Fullscreen-fixedと似ています.ヘッダーとフッターはページの上部と下部に残ります.It is also slightly see-through