jquery mobile - 工具欄、導航欄

在jquery mobile（如下簡稱jm）的頁眉頁腳中能夠定義一些按鈕，做爲導航和工具。

頁眉中，規定能夠定義兩個按鈕，使按鈕分佈在標題的左右兩側，

<div data-role="header">
  <a href="#" data-role="button">首頁</a>
  <h1>歡迎來到個人主頁</h1>
  <a href="#" data-role="button">搜索</a>
</div>

效果：

若是插入的按鈕超過兩個，則會出現：

其內置的樣式不支持超過兩個按鈕的頁眉的樣式的美觀，

若是在標題後面只插入一個按鈕，（標題前面插入一個會自動靠左），則不會自動靠右，需在按鈕上面加上類名"ui-btn-right"，並且標題的文本必定要放在<h>標題元素內，才能使jm中的頁眉樣式正確應用

頁腳中的按鈕個數沒有限制，看需求和頁面美觀自行規定按鈕個數

<div data-role="footer" class="ui-btn">  註釋：頁腳與頁眉的樣式不一樣（它會減去一些內邊距和空白，而且按鈕不會居中）。若是要修正該問題，請在頁腳設置類名 "ui-btn"：  
  <div data-role="controlgroup" data-type="horizontal">
    <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>
</div>

定位頁眉和頁腳：

放置頁眉和頁腳的方式有三種：頁眉和頁腳要分別加

Inline - 默認。頁眉和頁腳與頁面內容位於行內。跟隨滾動條滾動 data-position="inline" 
Fixed - 頁面和頁腳會留在頁面頂部和底部。 data-position="fixed"  滾動滾動條時頁眉和頁腳固定，內容區域不會佔據其位置
Fullscreen - 與 fixed 相似;頁面和頁腳會留在頁面頂部和底部，but also over the page content. It is also slightly see-through data-fullscreen="true" 滾動滾動條時頁眉和頁腳固定，內容全屏顯示，頁眉和頁腳底下也會有內容

導航欄由一組水平排列的連接構成，一般位於頁眉或頁腳內部，內容中也能夠放導航欄。默認地，導航欄中的連接會自動轉換爲按鈕（無需 data-role="button"）。使用 data-role="navbar" 屬性來定義導航欄：

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">首頁</a></li>
      <li><a href="#anylink">頁面二</a></li>
      <li><a href="#anylink">搜索</a></li>
    </ul>
  </div>
</div>

按鈕的寬度默認與內容一致（沒有用ul li包圍），用無序列表均等劃分按鈕寬度，1個100%，2個各50%。。。，導航欄內的按鈕在小於等於5的時候，排列在一行，大於5的時候會以每行兩個的分佈折行顯示。導航欄的內容佔據一行，不於其餘內容分佈在同一行，max-width: 100%;

 導航欄內的連接有默認的點擊效果，若是想要在不敲擊連接時實現此外觀，請使用 class="ui-btn-active"，對於多個頁面，您也許須要爲每一個按鈕設置「被選」外觀，以表示用戶正在瀏覽該頁面。若是要這麼作，請向連接添加 "ui-state-persist" 類，以及 "ui-btn-active" 類