搜尋

首頁 >web前端 >H5教程 >小強的HTML5行動開發之路（43）－JqueryMobile頁首、工具列和標籤列導航

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

黄舟
黄舟原創
2017-02-15 13:18:301613瀏覽

一、頁眉

1、添加頁眉和頁腳

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

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

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

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

 



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>

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

二、新增返回按鈕

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


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

三、新增分段工具列

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



四、標籤導覽列

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




陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：小強的HTML5行動開發之路（42）－HTML4與HTML5文件結構比較下一篇：小強的HTML5行動開發之路（42）－HTML4與HTML5文件結構比較

相關文章

看更多