ホームページ > 記事 > ウェブフロントエンド > JQuery Mobile はナビゲーション バーと footer_jquery を実装します
ナビゲーション バーは、通常はヘッダーまたはフッターの内側に水平に配置された一連のリンクで構成されます。
デフォルトでは、ナビゲーション バーのリンクは自動的にボタンに変換されます (data-role="button" は必要ありません)。
ナビゲーション バーのコードは通常、データの役割がヘッダーである 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>
基本的なナビゲーション バーコードは上記のとおりで、2 つのボタンとタイトルとして 1 行のテキストが含まれています。 data-icon はボタンに対応する小さなアイコンを定義できます。ボタンをテキストの右側に配置したい場合は、class="ui-btn-right" スタイルを追加できます。 Jquery Mobile のナビゲーション セクション (ヘッダー内) には 2 つのボタンしか含めることができないことに注意してください。 (ご想像のとおり、一般的なモバイル アプリのナビゲーションにはそれほど多くのボタンはなく、通常はフッターに配置されます)
対照的に、フッター内のボタンの数に制限はありません。基本的なコードは次のとおりです。
<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>
ヘッダーとフッターに関しては、上記に加えて、data-position 属性を使用して、次の 3 つのオプションの値を含む位置属性を定義することもできます (w2cschool より):
インライン - デフォルト。ヘッダーとフッターはページのコンテンツとインラインで配置されます。
修正 – ヘッダーとフッターはページの上部と下部に残ります。
フルスクリーン - 固定と同様、ヘッダーとフッターはページの上部と下部に残りますが、ページのコンテンツもわずかに透けて見えます
。
ここでは、jQuery mobile のナビゲーション バーとフッターの実装に関する関連知識を紹介します。お役に立てば幸いです。