一、頁眉
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"> <h4>页面脚注</h4> </p>
内容
<p data-role="footer"> <h4>页面脚注</h4> </p>
内容
<p data-role="footer"> <h4>页面脚注</h4> </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>
左邊是文字圖示按鈕,右邊是純圖示按鈕。
三、新增分段工具列
<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)!