ナビゲーションバーとフッターのモバイル実装 (コード付き)

今回はモバイルでナビゲーションバーとフッターを実装する方法(コード付き)をお届けします。モバイルでナビゲーションバーとフッターを実装する方法についての注意点は何ですか。実際のケースを見てみましょう。 。

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

デフォルトでは、ナビゲーション バーのリンクは自動的にボタンに変換されます (data-role="button" は必要ありません)。

ナビゲーションバーのコードは通常、データの役割がヘッダーである p 内に配置されます。

<p data-role="header"> 
<a href="#" data-role="button" data-icon="home">首页</a> 
<h1>欢迎访问我的主页</h1> 
<a href="#" data-role="button" data-icon="search">搜索</a> 
</p>

基本的なナビゲーション バーコードは上記のとおりで、2 つのボタンとタイトルとして 1 行のテキストが含まれています。 data-icon はボタンに対応する小さなアイコンを定義できます。ボタンをテキストの右側に配置したい場合は、class="ui-btn-right" スタイルを追加できます。 Jquery Mobile のナビゲーション セクション (ヘッダー内) には 2 つのボタンしか含めることができないことに注意してください。 (ご想像のとおり、一般的なモバイル アプリのナビゲーションにはそれほど多くのボタンはなく、通常はフッターに配置されます)

対照的に、フッターのボタンの数に制限はなく、フッターは基本的なコードは次のとおりです:

<p 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> 
</p>

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

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

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

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

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

この事例を読んだ後、あなたはこの方法を習得したと思います。この記事では、よりエキサイティングな php 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

Mobile フレームワークでフォーム コンポーネントを使用する方法

jQuery Mobile と Kendo UI の使用の違いは何ですか

以上がナビゲーションバーとフッターのモバイル実装 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。