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

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番目に、戻るボタンを追加します

 







 
 


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

			
第 2 页
            
第 3 页
			
第 4 页
            
第 2 页
            
第 3 页
			
第 4 页
            
第 2 页
            
第 3 页
			
第 4 页
            
第 2 页
            
第 3 页
			
第 4 页
            
第 2 页
            
第 3 页
			
第 4 页
            
第 2 页
            
第 3 页
			
第 4 页
            
第 2 页
            
第 3 页
			
第 4 页
            
第 2 页
            
第 3 页
			
第 4 页
		
		
	

	<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) に注目してください。