Mobile實現導覽列與頁尾（附代碼）

這次帶給大家Mobile實現導覽列與頁腳（附程式碼），Mobile實現導覽列與頁腳的注意事項有哪些，以下就是實戰案例，一起來看一下。

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

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

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

<p data-role="header"> 
<a href="#" data-role="button" data-icon="home">首页</a> 
<h1>欢迎访问我的主页</h1> 
<a href="#" data-role="button" data-icon="search">搜索</a> 
</p>

一個基本的導覽列程式碼如上，包含兩個按鈕和一行文字作為標題。 data-icon可以定義按鈕對應的小圖示。如果希望將按鈕放在文字右側，可以加入class=「ui-btn-right」樣式。要注意的是，Jquery Mobile中的導航部分（header內）只能包含兩個按鈕。 （可以想像一下，一般的手機app導航內都不會有過多的button，一般都放在頁腳中）

#之下，頁腳的按鈕數量沒有限制，頁腳放在footer中，基本程式碼如下：

<p 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> 
</p>

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

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

Inline - 預設。頁首和頁尾與頁面內容位於行內。

Fixed – 頁首和頁尾會留在頁面頂部和底部。

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Mobile框架中如何使用表單元件

#jQuery Mobile與Kendo UI使用時有哪些差異

#

以上是Mobile實現導覽列與頁尾（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！