?
This document uses PHP Chinese website manual Release
工具欄元素通常位于頭部和尾部內(nèi) - 讓導(dǎo)航易于訪問:
頭部欄一般包含頁面標(biāo)題/logo 或一兩個按鈕(通常是首頁、選項(xiàng)或搜索)。
您可以添加按鈕到頭部的左側(cè)或右側(cè)。
下面的代碼,將添加一個按鈕到頭部標(biāo)題文本的左側(cè),添加一個按鈕到頭部標(biāo)題文本的右側(cè):
效果預(yù)覽 ?<div data-role="header">
<a href="#" data-role="button">首頁</a>
<h1>歡迎來到我的主頁</h1>
<a href="#" data-role="button">搜索</a>
</div>
下面的代碼,將添加一個按鈕到頭部標(biāo)題文本的左側(cè):
<div data-role="header">
<a href="#" data-role="button">首頁</a>
<h1>歡迎來到我的主頁</h1>
</div>
但是,如果您把按鈕鏈接放置在 <h1> 元素之后,將無法顯示右側(cè)的文本。要添加一個按鈕到頭部標(biāo)題的右側(cè),請指定 class 為 "ui-btn-right":
效果預(yù)覽 ?<div data-role="header">
<h1>歡迎來到我的主頁</h1>
<a href="#" data-role="button" class="ui-btn-right">搜索</a>
</div>
頭部可以包含一個或兩個按鈕,而尾部沒有限制。 |
尾部欄比頭部欄更靈活 - 在整個頁面中它們更具功能性和可變性,因此可以包含盡可能多的按鈕:
效果預(yù)覽 ?<div data-role="footer">
<a href="#" data-role="button">在 Facebook上關(guān)注我</a>
<a href="#" data-role="button">在Twitter上關(guān)注我</a>
<a href="#" data-role="button">在Instagram上關(guān)注我</a>
</div>
注意:尾部的樣式與頭部不同(沒有內(nèi)邊距和空間,且按鈕不居中)。為了解決這個問題,請把 "ui-btn" 放置在尾部的 class 上:
<div?data-role="footer"?class="ui-btn">效果預(yù)覽 ?
您還可以將尾部中的按鈕進(jìn)行水平或垂直組合:
效果預(yù)覽 ?<div data-role="footer" class="ui-btn">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="plus">在Facebook上關(guān)注我</a>
<a href="#" data-role="button" data-icon="plus">在Twitter上關(guān)注我</a>
<a href="#" data-role="button" data-icon="plus">在Instagram上關(guān)注我</a>
</div>
</div>
頭部和尾部可以通過三種方式進(jìn)行定位:
使用 data-position 屬性來定位頭部欄和尾部欄:
效果預(yù)覽 ?<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>
效果預(yù)覽 ?<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>
要啟用全屏定位,請使用 data-position="fixed",并添加 data-fullscreen 屬性到元素:
效果預(yù)覽 ?<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
提示:全屏定位適用于照片、圖像和視頻。
提示:固定定位和全屏定位中,通過點(diǎn)擊屏幕將隱藏和顯示頭部欄和尾部欄。