導(dǎo)航欄由一組水平排列的鏈接構(gòu)成，通常位于頁(yè)眉或頁(yè)腳內(nèi)部。

默認(rèn)地，導(dǎo)航欄中的鏈接會(huì)自動(dòng)轉(zhuǎn)換為按鈕（無(wú)需 data-role="button"）。

導(dǎo)航欄部分的代碼一般放置在data-role為header的div的內(nèi)。

<div data-role="header"> 
<a href="#" data-role="button" data-icon="home">首頁(yè)</a> 
<h1>歡迎訪問(wèn)我的主頁(yè)</h1> 
<a href="#" data-role="button" data-icon="search">搜索</a> 
</div>

一個(gè)基本的導(dǎo)航欄代碼如上，包含兩個(gè)按鈕和一行文字作為標(biāo)題。data-icon可以定義按鈕對(duì)應(yīng)的小圖標(biāo)。如果希望將按鈕放在文本右側(cè)，可以添加class=“ui-btn-right”樣式。要注意的是，Jquery Mobile中的導(dǎo)航部分（header內(nèi)）只能包含兩個(gè)按鈕。（可以想象一下，一般的手機(jī)app導(dǎo)航內(nèi)都不會(huì)有過(guò)多的button，一般都放在頁(yè)腳中）

相比之下，頁(yè)腳的按鈕數(shù)量沒(méi)有限制，頁(yè)腳放在footer中，基本代碼如下：

<div data-role="footer"> 
<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>

這符合一般的移動(dòng)app設(shè)計(jì)模式，底部是切換到不同頁(yè)面的button。切換頁(yè)面的方式也很簡(jiǎn)單，注意到這里的每一個(gè)button都是用a標(biāo)簽定義的，其中的href就如我們上次所說(shuō)，是可以進(jìn)行頁(yè)面轉(zhuǎn)換的，只要在href后面添加另一個(gè)頁(yè)面的id（即data-role為page的div）即可完成跳轉(zhuǎn)。跳轉(zhuǎn)的過(guò)程有很多jquery mobile內(nèi)置定義的動(dòng)畫(huà)效果，在以后介紹。

關(guān)于頁(yè)眉和頁(yè)腳，除了上述所說(shuō)之外，還可以使用data-position屬性定義它們的位置屬性，包含以下三個(gè)可選值（來(lái)自：w2cschool）：

Inline - 默認(rèn)。頁(yè)眉和頁(yè)腳與頁(yè)面內(nèi)容位于行內(nèi)。

Fixed – 頁(yè)眉和頁(yè)腳會(huì)留在頁(yè)面頂部和底部。

Fullscreen - 與 fixed 類似;頁(yè)眉和頁(yè)腳會(huì)留在頁(yè)面頂部和底部，but also over thepage content. It is also slightly see-through

關(guān)于jQuery mobile實(shí)現(xiàn)導(dǎo)航欄和頁(yè)腳的相關(guān)知識(shí)就給大家介紹到這里，希望對(duì)大家有所幫助！

最新評(píng)論