工具欄元素常被放置于頁眉和頁腳中 - 以實現(xiàn)“已訪問”的導(dǎo)航:
頁眉通常會包含頁眉標(biāo)題/LOGO 或一到兩個按鈕(通常是首頁、選項或搜索按鈕)。
您可以在頁眉中向左側(cè)或/以及右側(cè)添加按鈕。
下面的代碼,將向頁眉標(biāo)題文本的左側(cè)添加一個按鈕,并向右側(cè)添加一個按鈕:
<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è)添加按鈕,請規(guī)定類名 "ui-btn-right":
<div data-role="header"> <h1>歡迎來到我的主頁</h1> <a href="#" data-role="button" class="ui-btn-right"
>搜索</a></div>
提示:頁眉可包含一個或兩個按鈕,然而頁腳沒有限制。
與頁眉相比,頁腳更具伸縮性 - 它們更實用且多變,所以能夠包含所需數(shù)量的按鈕:
<div data-role="footer"> <a href="#" data-role="button">轉(zhuǎn)播到新浪微博</a> <a href="#" data-role="button">轉(zhuǎn)播到騰訊微博</a> <a href="#" data-role="button">轉(zhuǎn)播到 QQ 空間</a></div>
注釋:頁腳與頁眉的樣式不同(它會減去一些內(nèi)邊距和空白,并且按鈕不會居中)。如果要修正該問題,請在頁腳設(shè)置類名 "ui-btn":
<div data-role="footer" class="ui-btn">
您也能夠選擇在頁腳中水平還是垂直地組合按鈕:
<div data-role="footer" class="ui-btn"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="plus">轉(zhuǎn)播到新浪微博</a> <a href="#" data-role="button" data-icon="plus">轉(zhuǎn)播到騰訊微博</a> <a href="#" data-role="button" data-icon="plus">轉(zhuǎn)播到 QQ 空間</a> </div></div>
放置頁眉和頁腳的方式有三種:
請使用 data-position 屬性來定位頁眉和頁腳:
<div data-role="header"data-position="inline"
></div><div data-role="footer"data-position="inline"
></div>
<div data-role="header"data-position="fixed"
></div><div data-role="footer"data-position="fixed"
></div>
如果需要啟用全面定位,請使用 data-position="fixed",并向該元素添加 data-fullscreen 屬性:
<div data-role="header" data-position="fixed"data-fullscreen="true"
></div><div data-role="footer" data-position="fixed"data-fullscreen="true"
></div>
提示:fullscreen 對于照片、圖像和視頻非常理想。
提示:對于 fixed 和 fullscreen 定位,觸摸屏幕將隱藏和顯示頁眉及頁腳。
聯(lián)系客服