JQuery Mobile實作導覽列和頁尾_jquery

導覽列由一組水平排列的連結構成，通常位於頁首或頁尾內部。

預設地，導覽列中的連結會自動轉換為按鈕（無需 data-role="button"）。

導覽列部分的程式碼一般放置在data-role為header的div的內。

<div data-role="header"> 
<a href="#" data-role="button" data-icon="home">首页</a> 
<h1 id="欢迎访问我的主页">欢迎访问我的主页</h1> 
<a href="#" 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="#" data-role="button" data-icon="plus">转播到新浪微博</a> 
<a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a> 
<a href="#" 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

關於jQuery mobile實作導覽列和頁腳的相關知識就給大家介紹到這裡，希望對大家有幫助！