Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (43) – JqueryMobile-Header, Symbolleiste und Tab-Leistennavigation

1. Kopfzeile

1. Kopf- und Fußzeile hinzufügen

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

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

Die Standardkopfzeile wird am oberen Rand des Bildschirms angezeigt, und wenn der Bildschirm gescrollt wird, Die Kopfzeile wird aus dem Bildschirm verschoben. Sie können eine feste Kopfzeile erstellen, indem Sie das Attribut data-position hinzufügen.

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

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

Sie können das Attribut date-theme verwenden, um das Thema der Kopfzeile anzupassen. Das Standardthema ist schwarz data-theme="a"

 







 
 


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

Nachdem Sie data-fullscreen="true" zum Seitencontainer hinzugefügt haben, klicken Sie auf den Bildschirm und die Kopf- und Fußzeile werden angezeigt. Klicken Sie erneut und sie verschwinden.

2. Fügen Sie eine Zurück-Schaltfläche hinzu

	<p data-role="header" data-position="fixed">
    	<a href="#" data-icon="back">返回</a>
		<h1>第 1 页</h1>
        <a href="#" data-icon="plus" data-iconpos="notext"/>
	</p>

Auf der linken Seite befindet sich eine Textsymbolschaltfläche. und die rechte Seite ist eine reine Symbolschaltfläche.

3. Segmentierte Symbolleiste hinzufügen

	<p data-role="header" data-position="fixed">
    	<a href="#" data-icon="back">返回</a>
		<h1>第 1 页</h1>
        <a href="#" data-icon="plus" data-iconpos="notext"/>
        <p data-role="controlgroup" data-type="horizontal" align="center" class="segment-control">
            <a href="#" data-role="button" class="ui-control-active">菜单一</a>
            <a href="#" data-role="button" class="ui-control-inactive">菜单二</a>
            <a href="#" data-role="button" class="ui-control-inactive">菜单三</a>
        </p>
	</p>

<style style="text/css">
	.segment-control{text-align:center;margin:0.2em;}
	.ui-control-active, .ui-control-inactive{border-style:solid; border-color:gray;}
	.ui-control-active{background:#BBB;}
	.ui-control-inactive{background:#DDD;}
</style>

4 🎜>

	<p data-role="footer" data-position="fixed">
		<p data-role="navbar">
        	<ul>
            	<li><a href="#" data-icon="arrow-l">A</a></li>
                <li><a href="#" data-icon="back">B</a></li>
                <li><a href="#" data-icon="star">C</a></li>
                <li><a href="#" data-icon="plus">D</a></li>
                <li><a href="#" data-icon="arrow-r">E</a></li>
            </ul>
        </p>
	</p>

Das Obige ist Xiaoqiangs HTML5-Entwicklungspfad für Mobilgeräte (43) - JqueryMobile-Header, Symbolleiste und Navigation in der Registerkartenleiste. Bitte beachten Sie den Inhalt Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!