這一章，詳細學習一下常用的JM組件。組件基本上可以分爲一下幾類：
- 工具欄組件
- 格式化組件
- 按鈕組件
- 列表組件
- 表單組件
1.工具欄組件（頁頭、頁腳）：
定位：
內聯模式——頁面長度超過可見高度時，頁腳將被隱藏，同時頁頭只在滾動條在頂部時纔可見（默認模式）。
標準固定模式——data-position=“fixed”，用戶滾動頁面內容時，工具欄會自動隱藏，滾動完成時，固定工具欄會再次在頂部或底部對應的位置出現。
全屏固定模式——data-position="fixed"/data-fullscreen="true"在點擊屏幕時纔出現的隱藏的固定工具欄，再次點擊時，又會消失。
=================================================
<div data-role="page" data-fullscreen="true">
<!--全屏固定模式 -->
<div data-role="header" data-position="fixed">
<!--全屏固定模式 -->
<div data-role="header" data-position="fixed">
<!--添加工具欄按鈕。一般工具欄一般右側使用肯定動作，左側使用否定動作。
header中一個a元素相當於一個按鈕，一個a元素，位於標題左側，兩個a元素，一個左一個右。可以使用class="ui-btn-right"/class="ui-btn-left"來強制制定按鈕位置。
data-icon表示應用圖標-->
<a href="logout" data-icon=”back“ data-rel="back">log out</a><!--指向上一頁-->
<h1><img src="images/logo.png"></h1> <!--添加logo標題，高度會自適應，但height<125px-->
<a href="settings" data-icon="gear" data-theme="b">Settings</a>
<h1><img src="images/logo.png"></h1> <!--添加logo標題，高度會自適應，但height<125px-->
<a href="settings" data-icon="gear" data-theme="b">Settings</a>
<!--如果不用JM的頁頭樣式，則在data-role=”header“下加一個<div></div>標籤，在裏面添加內容即可-->
</div>
<div data-role="content">
</div>
<!--頁腳中每個a元素都會渲染爲按鈕，可以添加任意數量的按鈕，加一個class=”ui-bar“視覺效果會好一些-->
<div data-role="footer" data-position="fixed" class="ui-bar">
<a href="refresh">Refresh</a>
<a href="filter">Filter</a>
<a href="search">Search</a>
<a href="add" data-theme="b">New Item</a>
</div>
</div>
</div>
<div data-role="content">
</div>
<!--頁腳中每個a元素都會渲染爲按鈕，可以添加任意數量的按鈕，加一個class=”ui-bar“視覺效果會好一些-->
<div data-role="footer" data-position="fixed" class="ui-bar">
<a href="refresh">Refresh</a>
<a href="filter">Filter</a>
<a href="search">Search</a>
<a href="add" data-theme="b">New Item</a>
</div>
</div>
===============================
導航欄：data-role="navbar"，一組鏈接組成的一系列互斥選項。通常放在頁腳。導航欄的元素控制在6個一下，以便讓它們全部顯示爲一行。
仿微信樣式：
<div data-role="header" data-position="fixed">
<h1>Home</h1>
<div data-role="navbar">
<ul>
<li><a href="#index" data-icon="home">Home</a>
<li><a href="#contacts" data-icon="search">Contacts</a>
<li><a href="#events" data-icon="info">Events</a>
<li><a href="#news" data-icon="grid">News</a>
</ul>
</div>
</div><div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#index" <span style="background-color: rgb(51, 204, 255);">class="ui-btn-active"</span>>Home</a>
<li><a href="#contacts">Contacts</a>
<li><a href="#events">Events</a>
<li><a href="#news">News</a>
</ul>
</div>
</div><!DOCTYPE html>
<html>
<head>
<!-- Typical jQuery Mobile header goes here -->
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content">
<p>This is content for the home</p>
</div>
<div data-role="footer"<span style="background-color: rgb(255, 255, 255);"> </span><span style="background-color: rgb(51, 204, 255);">data-id="main"</span> position="fixed">
<div data-role="navbar">
<ul>
<li><a data-icon="home" <span style="background-color: rgb(51, 204, 255);">class="ui-btn-active ui-state-persist"</span>>Home</a></li>
<li><a href="#help" data-icon="alert">Help</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="help">
<div data-role="header">
<h1>Help</h1>
</div>
<div data-role="content">
<p>This is content for Help</p>
</div>
<div data-role="footer" <span style="background-color: rgb(51, 204, 255);">data-id="main"</span> position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="home">Home</a></li>
<li><a data-icon="alert" <span style="background-color: rgb(51, 204, 255);">class="ui-btn-active ui-state-persist"</span>>Help</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>2.1可摺疊內容data-role="collapsible"
<div data-role="content">
<div data-role="collapsible">
<h2>History of Rome</h2>
<p>There is archaeological evidence of human occupation of the Rome area from at
least 14,000 years, but the dense layer of much younger debris obscures
Palaeolithic and Neolithic sites.[11] Evidence of stone tools, pottery and
stone weapons attest to at least 10,000 years of human presence.
</p>
</div>
<div data-role="collapsible" data-collapsed="true"> <!--已展開-->
<h2>Government of Rome</h2>
<p>Rome constitutes one of Italy's 8,101 communes, and is the largest both in terms
of land area and population. It is governed by a mayor, currently Gianni Alemanno,
and a city council.
</p>
</div>
</div><div data-role="content">
<div data-role="collapsible">
<h2>Rome</h2>
<div data-role="collapsible">
<h3>History</h3>
<p>There is archaeological evidence of human occupation of the Rome area from
at least 14,000 years, but the dense layer of much younger debris obscures
Palaeolithic and Neolithic sites.[11] Evidence of stone tools, pottery and
stone weapons attest to at least 10,000 years of human presence. </p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Government</h3>
<p>Rome constitutes one of Italy's 8,101 communes, and is the largest both in
terms of land area and population. It is governed by a mayor, currently
Gianni Alemanno, and a city council. </p>
</div>
</div>
<div data-role="collapsible">
<h2>Madrid</h2>
<div data-role="collapsible">
<h3>History</h3>
<p>Although the site of modern-day Madrid has been occupied since pre-historic
times,[23] in the Roman era this territory belonged to the diocese of
Complutum (present-day Alcalá de Henares).</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Government</h3>
<p>The City Council consists of 57 members, one of them being the Mayor,
currently Alberto Ruiz-Gallardón Jiménez. The Mayor presides over the
Council.</p>
</div>
</div>
</div><div data-role="page" id="home">
<div data-role="header">
<h1>@firt</h1>
</div>
<div data-role="content" data-theme="b">
<!-- This defines the whole collapsible set (accordion) -->
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h2>Books</h2>
<ul>
<li>Programming the Mobile Web</li>
<li>jQuery Mobile: Up & Running</li>
<li>Mobile HTML5</li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true">
<h2>Talks</h2>
<ul>
<li>Velocity Conference</li>
<li>OSCON</li>
<li>Mobile World Congress</li>
<li>Google DevFest</li>
</ul>
</div>
</div>
<!-- end of collapsible set (accordion) -->
</div>
</div>
3.排版（類似表格）
網格不可見，佔100%的寬度，沒有內外邊距，可定義2-5列
ui-grid-a表示2列，ui-grid-b表示3列，ui-grid-c表示4列，ui-grid-d表示5列；
ui-block-a/b/c/d/e分別表示網格的第一列至第五列。
<div data-role="content"><pre name="code" class="html"> <section class="ui-grid-a">
<div class="ui-block-a">Column 1</div>
<div class="ui-block-b">Column 2</div>
</section> <!-- Row 1 -->
<div class="ui-block-a">Cell 1.1</div>
<div class="ui-block-b">Cell 1.2</div>
<div class="ui-block-c">Cell 1.3</div>
<!-- Row 2 -->
<div class="ui-block-a">Cell 2.1</div>
<div class="ui-block-b">Cell 2.2</div>
<div class="ui-block-c">Cell 2.3</div>
</section>
</div>創建按鈕的三種方式：button元素/input type="button"/data-role="button"，默認情況下佔滿整個屏幕。
<a href="#" data-role="button">Click me!</a>
<button data-theme="b">Click me too!</button>
<input type="button" value="Don't forget about me!"><a href="#" data-role="button" data-inline="true">Button 1</a><div <span style="background-color: rgb(51, 204, 255);">data-role="controlgroup"</span>>
<a href="#" data-role="button">Button 1</a>
<a href="#" data-role="button">Button 2</a>
<a href="#" data-role="button">Button 2</a>
</div><div data-role="controlgroup" <span style="background-color: rgb(51, 204, 255);">data-type="horizontal"</span>>
<a href="#" data-role="button" data-inline="true">Button 1</a>
<a href="#" data-role="button" data-inline="true">Button 2</a>
<a href="#" data-role="button" data-inline="true">Button 2</a>
</div><a href="#” data-role="button” data-shadow="false” data-corners="false">Help</a><style>
.ui-icon-myapp-tweet {
background-image: url(icons/tweet.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.ui-icon-myapp-tweet {
background-image: url(icons-hd/tweet.png) !important;
background-size: 18px 18px;
}
}
</style><pre name="code" class="html"><a href="#" data-role="button" data-icon="myapp-tweet">Tweet</a><a href="#" data-role="button" data-icon="help" data-iconpos="right">Help</a>
<a href="#" data-role="button" data-icon="help" data-iconpos="left">Help</a>
<div data-role="controlgroup">
<a href="#" data-role="button" data-icon="help" data-iconpos="bottom">Help</a>
<a href="#" data-role="button" data-icon="help" data-iconpos="top">Help</a>
</div>| 圖標 | 值 | 圖標 | 值 |
|---|---|---|---|
| 向左箭頭 | arrow-l | 刷新 | refresh |
| 向右箭頭 | arrow-r | 向前動作 | forward |
| 向上箭頭 | arrow-u | 向後動作 | back |
| 向下箭頭 | arrow-d | 網格 | grid |
| 刪除（X） | delete | 星星 | star |
| 加號 | plus | 警報（警號） | alert |
| 減號 | minus | 信息（i） | info |
| 檢查標記（√） | check | 主頁圖標 | home |
| 齒輪圖標 | gear | 搜索圖標 | search |
