jQuery Mobile(3)-頁首頁尾與導覽列

建立行動網頁基本版型中已經有提到頁首、頁尾的基本建立方式,本篇將介紹其進一步的設定,以及導覽列(通常置於網頁最上方或最下方)的使用方式。

資料來源:跨裝置網頁設計jQuery Mobile Demos

頁首按鈕

頁首除了標題之外,可以使用 來建立按鈕。第一個按鈕預設顯示在標題左邊,第二個按鈕顯示在標題右邊。第三個以上的按鈕會被斷行後顯示在標題下面,所以不建議有三個以上的按鈕。按鈕可以利用「顏色與樣式設計」裡介紹的語法 data-theme 指定按鈕顏色、data-icon 加入按鈕的圖示。透過指定 class 為 ui-btn-left 或 ui-btn-right 的方式,可以改變預設按鈕的順序。例如下面程式第 4、5 行按順序顯示應該是 Next 在左,home 在右,但透過指定 class 把位置調換了。第 4 行的按鈕指定樣式為 b,因此顯示為藍色。

頁首

Next home

除了自訂按鈕外,jQuery Mobile 也提供了”返回”鍵,讓使用者可以回到瀏覽器的上一頁。加入返回鍵的方式有兩種,請參考下面程式碼。第一種是在 page 裡加入 data-add-back-btn=“true” 屬性,如第 14 行。第二種是自行鍵立一般的按鈕或連結,並且加上 data-rel=“back” 屬性,如第 24 行,此時 href 裡的位置會被忽略。不過官方建議 href 裡還是要指定頁面,避免瀏覽器不支援。有時我們在頁首頁尾不想顯示文字,但又必須保留其高度時,可以利用 21 行的 ui-title 讓它維持在一定高度。


頁尾按鈕

頁尾一樣會把 變成按鈕,但不會自動安排位置,所有按鈕都會靠左依序排列下去。另外,如果要把頁尾固定在網頁的最下方,只要加入 data-position=“fixed” 屬性即可。

Add

頁尾

Up Down

自訂頁首頁尾

如果想要不受限制編排自己的頁首頁尾,可以使用 ui-bar 來完成。參考下面的程式碼,第 37 行建立一個 div 標籤,並指定 class 為 ui-bar。若我們想要套用樣式,class 就要再加上 ui-bar-# 屬性值,其中 # 為樣式代碼(參考顏色與樣式設計)。這裡我們指定為 ui-bar-e 所以顯示成黃色。這個自訂的bar若是在 content 元素上面,就會變成頁首;在下面就會變成頁尾,也可以套用 data-position=“fixed” 屬性值。若是在 content 裡面,則會稍微內縮成一個區塊。

Dismiss 使用 ui-bar 建立的 bar,可作為警告示窗。

導覽列

建立導覽列只要在 div 標籤中加入 data-role=“navbar” 屬性即可。它可以與 header 或 footer 在同一層級,也可以被包在裡面,如下面的程式碼是放在 footer 裡面。導覽列的寬度為 100%,並且按照按鈕的數量等比例切割,例如兩個按鈕就各佔 50%,依此類推。當按鈕超過五個以上時,它會自動斷行。導覽列可以利用 data-theme 或是 ui-body-# 這個 class 屬性值來指定統一的樣式,其中 # 為樣式代碼(參考顏色與樣式設計),如下面程式碼第 42 行。第 45 行預設為選取狀態,所以呈現藍色,而 46 行設定 data-theme=“e”,所以顯示為黃色。