當前位置:才華齋>設計>網頁設計>

JQuery Mobile實現導航欄和頁尾

網頁設計 閱讀(7.68K)

導航欄是由一組水平排列的連結組成,通常包含在頭部或尾部內。

JQuery Mobile實現導航欄和頁尾

預設情況下,導航欄中的連結將自動變成按鈕(不需要 data-role="button")。

使用 data-role="navbar" 屬性來定義導航欄:

  複製程式碼 程式碼如下:

Home

Page Two

Search

預設情況下,按鈕的寬度與它的`內容一樣。使用一個無序列表來平均地劃分按鈕的寬度:1 個按鈕佔 100% 寬度,2 個按鈕則各佔 50% 的寬度,3 個按鈕則每個佔 33,3% 的寬度,依此類推。然而,如果您在導航欄中指定了超過 5 個按鈕,將會拆成多行(檢視"更多例項")。

  啟用按鈕

當導航欄中的某個連結被點選,它將獲得被選中(按下)的外觀。

如果想在不惦記連結時獲得這種外觀,請使用 class="ui-btn-active":

Home

對於多個頁面,您可能想要每個按鈕的選中外觀代表當前使用者所在的頁面。要做到這一點,請新增 "ui-state-persist" 和 "ui-btn-active" 到連結的 class:

Home