JQuery Mobile はナビゲーションバーと footer_jquery を実装します-jsチュートリアル-php.cn

JQuery Mobile はナビゲーションバーと footer_jquery を実装します

WBOY

リリース： 2016-05-16 15:11:16

オリジナル

1321 人が閲覧しました

ナビゲーションバーは、通常はヘッダーまたはフッターの内側に水平に配置された一連のリンクで構成されます。

デフォルトでは、ナビゲーションバーのリンクは自動的にボタンに変換されます (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>

ログイン後にコピー

これは、一般的なモバイルアプリのデザインパターンに沿っており、下部には別のページに切り替えるボタンがあります。ページを切り替える方法も非常に簡単です。ここでの各ボタンは、前回述べたように、href ID の後に別のページを追加するだけで実行できます。つまり、データの役割がページである div はジャンプを完了できます。ジャンプ処理には、後で紹介する jquery mobile に組み込まれた多くのアニメーション効果が含まれています。

ヘッダーとフッターに関しては、上記に加えて、data-position 属性を使用して、次の 3 つのオプションの値を含む位置属性を定義することもできます (w2cschool より):

インライン - デフォルト。ヘッダーとフッターはページのコンテンツとインラインで配置されます。

修正 – ヘッダーとフッターはページの上部と下部に残ります。

フルスクリーン - 固定と同様、ヘッダーとフッターはページの上部と下部に残りますが、ページのコンテンツもわずかに透けて見えます

。

ここでは、jQuery mobile のナビゲーションバーとフッターの実装に関する関連知識を紹介します。お役に立てば幸いです。