jQuery Mobile 導航欄和佈局

導航欄
1.使用data-role=”navbar”屬性來定義導航欄，導航欄最多放置5個按鈕，否則會換行。

<div data-role="header">
        <!-- 五個按鈕內,默認平分.如果有圖標默認在文字正上方 -->
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-icon="home">首頁</a></li>
                <li><a href="#" data-icon="search">搜索</a></li>
                <li><a href="#" data-icon="back">返回</a></li>
                <li><a href="#" data-icon="home">首頁</a></li>
                <li><a href="#" data-icon="search">搜索</a></li>
            </ul>
        </div>
    </div>

五個按鈕如圖：

若超過五個的話，如下圖：

2.在頁眉中設置標題欄，頁眉通常包含頁眉標題/LOGO或一到兩個按鈕，若只有一個按鈕，則默認顯示在左邊，除非添加樣式：class=”ui-btn-right”

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

若只有一個搜索按鈕，則會跑到左邊。

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

當在<a href="#" data-role="button">搜索</a>裏添加class=”ui-btn-right”，則搜索在右邊。

3.頁腳工具欄（在頁腳設置類名“ui-btn”）

<div data-role="footer" class="ui-btn">
    <a href="#" data-role="button">轉播到新浪微博</a>
    <a href="#" data-role="button">轉播到騰訊微博</a>
</div>

4.定位頁眉頁腳
（1）inline(默認)：頁眉和頁腳與頁面內容位於行內
（2）fixed:單擊隱藏頁腳
（3）fullscreen:單擊隱藏頁眉和頁腳
使用 data-position 屬性來定位頁眉和頁腳：

Inline 定位（默認）

<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>

Fixed 定位

<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>

Fullscreen 定位
如果需要啓用全面定位，請使用 data-position=”fixed”，並向該元素添加 data-fullscreen 屬性：

<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

佈局
一般使用流式佈局，即寬度使用百分比來表示。

基於流式的佈局網格
jQuery Mobile 提供了一套基於 CSS 的列布局方案。不過，一般不推薦在移動設備上使用列布局，這是由於移動設備的屏幕寬度所限。但是有時您需要定位更小的元素，比如按鈕或導航欄，就像在表格中那樣並排。這時，列布局就恰如其分。網格中的列是等寬的（總寬是 100%），無邊框、背景、外邊距或內邊距。可使用的佈局網格有四種：

<div class="ui-grid-b">
            <!-- 第一行有三個按鈕 -->
            <div class="ui-block-a"><a href="#" data-role="button" data-icon="home">首頁</a></div>
            <div class="ui-block-b"><a href="#" data-role="button" data-icon="search">搜索</a></div>
            <div class="ui-block-c"><a href="#" data-role="button" data-icon="back">返回</a></div>
            <!-- 第二行有二個按鈕 -->
            <div class="ui-block-a"><a href="#" data-role="button" data-icon="home">首頁</a></div>
            <div class="ui-block-b"><a href="#" data-role="button" data-icon="search">搜索</a></div>
            <!-- 第三行有一個按鈕 -->
            <div class="ui-block-a"><a href="#" data-role="button" data-icon="back">返回</a></div>
        </div>

上述代碼設置網格爲ui-grid-b，則是將網頁分爲三部分，如果改變網格，則也可以稱爲不同的樣式，如下圖，若網格設爲ui-grid-c