導覽列由一組水平排列的連結構成,通常位於頁首或頁尾內部。
預設地,導覽列中的連結會自動轉換為按鈕(無需 data-role="button")。
導覽列部分的程式碼一般放置在data-role為header的div的內。
<div data-role="header"> <a href="#" data-role="button" data-icon="home">首页</a> <h1>欢迎访问我的主页</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實作導覽列和頁腳的相關知識就給大家介紹到這裡,希望對大家有幫助!