# 頭部欄
## 頭部欄結構 Header structure
頭部欄是處于頁面頂部的工具欄,通常包含頁面標題文字,文字左邊和/或右邊可以放置幾個可選的按鈕用作導航操作
標題文字一般用h1標簽,但是從h1-h6都是可以的,這樣可以使結構有彈性。比如說,一個頁面內包含了多個"page"標記的頁面,這樣可以給主"page"的標題文字用h1標簽,次級"page"的標題文字用h2標簽。所有的頭部默認下在樣式上都是相同的,保持的外觀的一致性
```
<div data-role="header">
<h1>Page Title</h1>
</div>
```
## 默認的頭部的特性 Default header features
頭部欄的主題樣式默認情況下為"a"(黑色),但是你可以很輕松的設置主題樣式
**默認的頭部欄**

**看見back按鈕了嗎**Jquery Mobile會自動給每個頁面的頭部欄生成一"back"按鈕,來簡化把按鈕放進頭部欄的過程。如果你不想?quot;back"按鈕放進頭部欄,你可以自己加一個需要的按鈕或者給頭部欄添加”data-backbtn="false"屬性
## 添加按鈕 Adding buttons
在標準的頭部欄的設置下,標題文字兩邊各有一個可放置按鈕的位置。每一個按鈕通常都是都是a,但是任何有效的按鈕標記的元素都可以。為了節省空間,工具欄里的按鈕都是內聯按鈕,所以按鈕的寬度只容納icon和里面的文字
## 創建自定義的后退按鈕 Creating custom back buttons
給a標簽增加data-rel="back"的屬性,任何鏈接都可以樣式化為后退按鈕,行為上為后退到上一個歷史記錄的頁面,無視該鏈接的herf地址。這對于要鏈接回到一個命名好的頁面的情況是很有用的**但是注意請給鏈接設定一個有意義的herf地址,指向實際要連接的頁面,使得C級瀏覽器也能夠使用這個按鈕**而且要注意如果你只是需要一個后退的頁面轉場效果,而不是真正的后退到上一個歷史記錄的頁面,應該用data-direction="reverse" 的屬性,而不是用data-rel="back"屬性的按鈕
## 按鈕默認的定位 Default button positioning
頭部的按鈕是頭部欄容器的直接子節點,第一個鏈接定位于頭部欄左邊,第二個鏈接放在右邊,在這個例子中,根據兩個鏈接在源代碼中的位置,取消在左邊,保存在右邊
```
<div data-role="header" data-position="inline">
<a href="index.html" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1>
<a href="index.html" data-icon="check">Save</a>
</div>
```
**按鈕默認的定位**

按鈕會自動應用他們的父容器的主題樣式,所以應用了"a"主題樣式的頭部欄里的按鈕也會應用"a"主題樣式,我們通過給按鈕增加data-theme的屬性并設置,可以使按鈕看起來有所區別
```
<div data-role="header" data-position="inline">
<a href="index.html" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1>
<a href="index.html" data-icon="check" data-theme="b">Save</a>
</div>
```

## 通過class控制按鈕的定位 Controlling button position with classes
按鈕的位置可以通過class設置,而不依賴他們在源代碼中的順序。如果你想把唯一一個按鈕放在右邊,這時就非常有用了。兩個控制的類為ui-btn-right 和ui-btn-left
在這個例子中,我們要把頭部欄唯一一個按鈕放于右邊,首先給頭部欄增加data-backbtn="false"屬性來阻止頭部欄自動生成后退按鈕的行為,然后給自己的按鈕增加ui-btn-right的class
```
<div data-role="header" data-position="inline" data-backbtn="false">
<h1>Page Title</h1>
<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
</div>
```

## 自定義頭退按鈕的文字 Customizing the back button text
如果你想設置后退按鈕的文字,需要給頁面?page"元素增加data-back-btn-text="文字"的屬性,或者通過程序來實現?$.mobile.page.prototype.options.backBtnText = "文字";
如果你想配置后退按鈕的主題樣式,使用 $.mobile.page.prototype.options.backBtnTheme = "a" 如果你要用這段程序,需要在mobileinit時間的處理程序中使用
## 自定義頭部欄的配置 Custom header configurations
如果你想創建一個不遵循默認配置的頭部欄,在header容器里用div包裹你的自定義內容就好,Jquery Mobile不會自動生成按鈕,所以你可以給你的頭部欄自定義你的樣式
- 綜述
- Jquery mobile介紹 Jquery Mobile Overview
- 關鍵特性: Key features:
- 可訪問性 Accessibility
- a4版本支持的平臺 Supported platforms in Alpha 4
- API
- 默認配置
- 事件
- 方法
- 有響應的布局助手
- 主題
- 組件
- 頁面與對話框
- 頁面
- 頁面轉場 Page transitions
- 創建對話框 Creating dialogs
- Jquery Mobile的導航模型 Jquery Mobile's navigation model
- 鏈接的格式 Link formats
- 給頁面主題樣式 Page Theming
- 工具欄
- 工具欄
- 頭部欄
- 尾部欄
- 導航欄
- 固定定位的工具欄會在滾屏后重新出現 Fixed toolbars will re-appear after you scroll
- 全屏的固定的工具欄 Fullscreen fixed toolbar
- 持續的尾部欄 Persistent footer nav bar
- 給頭部欄和尾部欄設置主題樣式
- 按鈕
- 按鈕標記選項 Button markup options
- 給按鈕添加圖標 Adding Icons to Buttons
- 內聯按鈕 Inline buttons
- 組按鈕 Grouped buttons
- 主題化按鈕 Theming buttons
- 內容的格式化
- html格式化 HTML Formatting
- 布局網格 Layout grids
- 可折疊的內容 Collapsible content markup
- 給內容主題 Theming content
- 表單元素
- 表單元素 Form elements
- 表單元素示例 Form element gallery
- 文本輸入框 Text inputs
- 搜索輸入框 Search inputs
- 滑動條 Slider
- 開關 Flip toggle switches
- 復選按鈕 Checkboxes
- 單選按鈕組 Radio buttons
- 選擇菜單 Select menus
- 表單的主題樣式 Form themes
- ajax的表單提交 Ajax form submission
- 表單插件的方法 Form Plugin Methods
- Jquery UI 的移動版日期拾取器插件 Jquery UI's Datepicker Styled for mobile
- 列表
- 列表 List views
- 列表標記的規約List markup conventions