小強的HTML5行動開發之路（43）－JqueryMobile頁首、工具列和標籤列導航-H5教程-PHP中文網

第 1 页

页面脚注

首頁

web前端

H5教程

小強的HTML5行動開發之路（43）－JqueryMobile頁首、工具列和標籤列導航

黄舟

Feb 15, 2017 pm 01:18 PM

一、頁眉

1、添加頁眉和頁腳

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

登入後複製

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

登入後複製

默認的頁眉在屏幕的頂部邊緣顯示，而且在在屏幕滾動時，頁眉會滑出屏幕之外，通過添加data-position屬性可以建立一個固定的頁眉

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

登入後複製

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

登入後複製

可以使用date-theme屬性來調整頁眉的主題，預設主題是黑色data-theme="a"

 



jQuery Mobile Web 应用程序



 
 


	<p data-role="header" data-position="fixed">
		<h1 id="第-nbsp-nbsp-页">第 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 id="页面脚注">页面脚注</h4>
	</p>



	

		
第 2 页
	
		
		内容		
	
	<p data-role="footer">
		<h4 id="页面脚注">页面脚注</h4>
	</p>



	

		
第 3 页
	
		
		内容		
	
	<p data-role="footer">
		<h4 id="页面脚注">页面脚注</h4>
	</p>



	

		
第 4 页
	
		
		内容		
	
	<p data-role="footer">
		<h4 id="页面脚注">页面脚注</h4>
	</p>

登入後複製

小強的HTML5行動開發之路（43）－JqueryMobile頁首、工具列和標籤列導航

二、新增返回按鈕

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

登入後複製

左邊是文字圖示按鈕，右邊是純圖示按鈕。

三、新增分段工具列

	<p data-role="header" data-position="fixed">
    	<a href="#" data-icon="back">返回</a>
		<h1 id="第-nbsp-nbsp-页">第 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>

登入後複製

四、標籤導覽列

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

登入後複製

工具列和標籤列導覽的內容，更多相關內容請關注PHP中文網（www.php.cn）！