jQuery Mobile 的標準工具列

一、標題工具列

標題工具列是位在頁面的最上方，通常包含標題文字或左、右2個按鈕，可以用來作為巡覽用途，如下圖所示。

 範例一：在標題工具列加入登入按鈕

說明：在 <div data-role="header"> 下，加入<a href="#" data-theme="b">登入</a>預設會在左邊。



下載範例


<div data-role="header" data-theme="b">
    <a href="#" data-theme="b">登入</a>
    <h1> 我是標頭1</h1>
</div>

範例二：在標題工具再加入設定紐。

說明： 在 <div data-role="header"> 下，加入<a href="#" data-theme="b">登入</a>後再加入， <a href="#" data-icon="gear">設定</a>


下載範例


<div data-role="header" data-theme="b">
     <a href="#" data-theme="b">登入</a>
        <h1> 我是標頭1</h1>
      <a href="#" data-icon="gear">設定</a>
</div>

範例三：在標題工具列加入商標圖片

說明：在 <div data-role="header"> 下，加入 <h1> <img src="ajax-loader.gif" /> </h1>，即可。



下載範例





<div data-role="header" data-theme="b">
     <a href="#" data-theme="b">登入</a>
     <h1> <img src="ajax-loader.gif" /> </h1>
      <a href="#" data-icon="gear">設定</a>
</div>

二、註腳工具列

在註腳工具列加入任何超鏈結<a>都會自動轉換成按鈕。

搭配class="ui-bar"屬性，即會自動加入相關合適的效果。

運用屬性 data-icon 屬性搭配 delete 等參數，有哪些參數請參考官方文件

<下載範例>

<div data-role="footer" class="ui-bar">
    <a href="#" data-icon="delete">刪除</a>
    <a href="#" data-icon="plus">新增</a>
    <a href="#" data-icon="gear">設定</a>
 </div>

結果：

三、jQuery Mobile 工具列的定位模式

• 同行模式(Inline Mode)：工具列預設模式。
  
• 標準固定模式(Standard Fixed Mode)：不論螢幕尺寸，標題工具列是位於螢幕最上方；註腳工具列在最下方。
  
• 全螢幕固定模式(Full-screen Fixed Mode)：類似標準固定模式，當點選或觸摸螢幕時，工具列就會自動隱藏。