検索

ホームページ  >  記事  >  ウェブフロントエンド  >  Xiaoqiang の HTML5 モバイル開発ロード (43) - JqueryMobile ヘッダー、ツールバー、タブ バーのナビゲーション

Xiaoqiang の HTML5 モバイル開発ロード (43) - JqueryMobile ヘッダー、ツールバー、タブ バーのナビゲーション

黄舟
黄舟オリジナル
2017-02-15 13:18:301595ブラウズ

1. ヘッダー

1. ヘッダーとフッターを追加します

rree
	<p data-role="header">
		<h1>第 1 页</h1>
	</p>

デフォルトのヘッダーは画面の上端に表示され、画面をスクロールするとヘッダーが画面からはみ出します。属性で固定ヘッダーを作成できます

	<p data-role="footer">
		<h4>页面脚注</h4>
	</p>
	<p data-role="header" data-position="fixed">
		<h1>第 1 页</h1>
	</p>

date-theme 属性を使用してヘッダーのテーマを調整できます。デフォルトのテーマは黒です。data-theme="a"

	<p data-role="footer" data-position="fixed">
		<h4>页面脚注</h4>
	</p>


pagecontainer true」の場合、画面をクリックするとヘッダーとフッターが表示され、再度クリックすると消えます。

2番目に、戻るボタンを追加します

 



jQuery Mobile Web 应用程序



 
 



	<p data-role="header" data-position="fixed">
		<h1>第 1 页</h1>
	</p>
	
	
		
		
	

	<p data-role="footer" data-position="fixed">
		<h4>页面脚注</h4>
	</p>





	

		
第 2 页

	

	
	
		内容		
	

	<p data-role="footer">
		<h4>页面脚注</h4>
	</p>





	

		
第 3 页

	

	
	
		内容		
	

	<p data-role="footer">
		<h4>页面脚注</h4>
	</p>





	

		
第 4 页

	

	
	
		内容		
	

	<p data-role="footer">
		<h4>页面脚注</h4>
	</p>


左はテキストアイコンボタン、右は純粋なアイコンボタンです。

3. セグメント化されたツールバーを追加します



4. ラベルナビゲーションバー



上記はXiaoqiangのHTML5モバイル開発パス(43) - JqueryMobileヘッダー、ツールバーとタブバーのナビゲーション関連コンテンツの詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。




声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Xiaoqiang の HTML5 モバイル開発ロード (42) - HTML4 と HTML5 のドキュメント構造の比較次の記事：Xiaoqiang の HTML5 モバイル開発ロード (42) - HTML4 と HTML5 のドキュメント構造の比較

関連記事

続きを見る