自己學習jQuery mobile的一些小的東西，不怎麼樣，發上來記錄一下自己的成長。（大神見笑）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jQuery mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><!--頭部工具欄 ==== 一般包含一到兩個按鈕，再多不適合，頁腳不限制-->
<a href="" data-icon="home" data-role="button">首頁</a>
<h1>頁頭</h1>
<a href="" data-icon="search" data-role="button">搜索</a>
</div>
<div data-role="content">內容
<a href="#se" data-transition="slide">#se</a>
<a href="#third" data-transition="slide">#third</a>
<a href="#forth" data-transition="pop">#fourth</a>
<div data-role="controlgroup"><!--jq mobile組合按鈕垂直分佈（默認），horizontal水平， vertical垂直分佈-->
<a href="" data-role="button">123</a>
<a href="" data-role="button">123</a>
<a href="" data-role="button">123</a><!--默認情況時的樣子-->
</div>
<div data-role="controlgroup" data-type="horizontal">
<a href="" data-role="button">123</a>
<a href="" data-role="button">123</a>
<a href="" data-role="button">123</a><!--水平情況時的樣子-->
</div>
<div data-role="controlgroup" data-type="vertical">
<a href="" data-role="button">123</a>
<a href="" data-role="button">123</a>
<a href="" data-role="button">123</a><!--水平情況時的樣子-->
</div>
<button>按鈕（一般用來提交表單）</button>
<input type="button" value="按鈕（一般用來提交表單）"/>
<a href="" data-shadow="true" data-role="button">true(有陰影)|false(沒有陰影)</a>
<a href="" data-role="button" data-shadow="false" >true(有陰影)|false(沒有陰影)</a>
<a href="#" data-role="button" data-shadow="false">123</a>
<a href="" data-role="button" data-iconpos="left" data-icon="arrow-l">左按鈕</a><!--按鈕圖標位置-->
<a href="#third" data-role="button" data-iconpos="right" data-icon="arrow-r" data-transition="pop">右按鈕</a>
<a href="" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
</div>
<div data-role="footer" class="ui-btn">
<!-- <h1>頁尾</h1>- ==== 在footer裏h1默認的是居中顯示，如果在footer里加上class="ui-btn"之後，不會顯示-->
<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 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>
</div>
<div data-role="page" id="se"><!--頁面跳轉第二頁 ==== 在一個html裏寫上兩個data-role="page"-->
<div data-role="header" data-position="fixed" data-fullscreen="true"><h1>頁頭</h1></div>
<div data-role="content">
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
<p>1233333333333333333333333333333333333333333333333333333333333333333333333333333333222222222222222222555555555555555555551111111111111111111111111111515511515555555555555555555555555555555555555555555555555555555555555555555555555555555555</p>
</div>
<div data-role="footer" data-position="fixed"><h1>頁尾</h1></div>
</div>
<div data-role="page" id="third"><!--頁面跳轉第二頁 ==== 在一個html裏寫上兩個data-role="page"-->
<div data-role="header"><h1>頁頭</h1></div>
<div data-role="navbar"><!--導航欄 ==== 按鈕個數一行最多有5個，再多之後會折行下來，然後會每兩個按鈕一行。-->
<ul><!--導航欄在header之下，content之上（情況一）-->
<li><a href="" data-icon="home" class="ui-btn-active">首頁</a></li>
<li><a href="" data-icon="arrow-r">選項</a></li>
<li><a href="" data-icon="search">搜索</a></li>
<li><a href="" data-icon="search">搜索</a></li>
</ul>
</div>
<button>經常用來提交表單，不作頁面鏈接按鈕</button>
<div data-role="footer">
<div data-role="navbar" data-iconpos="left"><!--導航欄 ==== 按鈕個數一行最多有5個，再多之後會折行下來，然後會每兩個按鈕一行。-->
<ul><!--導航欄在footer中-->
<li><a href="" data-icon="home" class="ui-btn-active ui-btn-persist">首頁</a></li>
<li><a href="" data-icon="arrow-r">選項</a></li>
<li><a href="" data-icon="search">搜索</a></li>
<li><a href="" data-icon="search">搜索</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="forth">
<div data-role="header"><h1>頁頭</h1></div>
<div data-role="content" data-inset="false">
<div data-role="collapsible-set" data-inset="false">
<div data-role="collapsible" ><!--默認摺疊框是閉合的，如果想讓他不在摺疊，在頁面加載的時候也顯示，所以加上data-collapsed="false"屬性。-->
<h1>123456</h1>
<p>9876543210.</p>
</div>
<div data-role="collapsible"><!--默認摺疊框是閉合的，如果想讓他不在摺疊，在頁面加載的時候也顯示，所以加上data-collapsed="false"屬性。-->
<h1>123456</h1>
<p>9876543210.</p>
</div>
<div data-role="collapsible" ><!--默認摺疊框是閉合的，如果想讓他不在摺疊，在頁面加載的時候也顯示，所以加上data-collapsed="false"屬性。-->
<h1>123456</h1>
<p>9876543210.</p>
</div>
<div data-role="collapsible"><!--默認摺疊框是閉合的，如果想讓他不在摺疊，在頁面加載的時候也顯示，所以加上data-collapsed="false"屬性。-->
<h1>123456</h1>
<p>9876543210.</p>
</div>
</div>
</div>
<div data-role="footer"><h1>頁尾</h1></div>
</div>
</body>
</html>