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

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

黄舟

Freigeben： 2017-02-15 13:18:30

Original

1616 Leute haben es durchsucht

1. Kopfzeile

1. Kopf- und Fußzeile hinzufügen

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

 



jQuery Mobile Web 应用程序




 
 


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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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 (m.sbmmt.com)!