HTML5開發移動web應用—JQuery Mobile(2)-導航欄和頁腳

導航欄部分的代碼一般放置在data-role為header的div的内。

<div data-role="header">
    <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-role="button" data-icon="home">首頁</a>
    <h1>歡迎通路我的首頁</h1>
    <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-role="button" data-icon="search">搜尋</a>
  </div>
           

一個基本的導航欄代碼如上，包含兩個按鈕和一行文字作為标題。data-icon可以定義按鈕對應的小圖示。如果希望将按鈕放在文本右側，可以添加class=“ui-btn-right”樣式。要注意的是，Jquery Mobile中的導航部分（header内）隻能包含兩個按鈕。（可以想象一下，一般的手機app導航内都不會有過多的button，一般都放在頁腳中）

相比之下，頁腳的按鈕數量沒有限制，頁腳放在footer中，基本代碼如下：

<div data-role="footer">
    <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-role="button" data-icon="plus">轉播到新浪微網誌</a>
    <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-role="button" data-icon="plus">轉播到騰訊微網誌</a>
    <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-role="button" data-icon="plus">轉播到QQ空間</a>
</div>
           

這符合一般的移動app設計模式，底部是切換到不同頁面的button。切換頁面的方式也很簡單，注意到這裡的每一個button都是用a标簽定義的，其中的href就如我們上次所說，是可以進行頁面轉換的，隻要在href後面添加另一個頁面的id（即data-role為page的div）即可完成跳轉。跳轉的過程有很多jquery mobile内置定義的動畫效果，在以後介紹。

關于頁眉和頁腳，除了上述所說之外，還可以使用data-position屬性定義它們的位置屬性，包含以下三個可選值（來自：w2cschool）：

Inline - 預設。頁眉和頁腳與頁面内容位于行内。

Fixed – 頁眉和頁腳會留在頁面頂部和底部。

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