這是昨天學習JQuery mobile基本元素的總結，下述代碼基本包含了所有元素的用法，需要的同學可以拷去運行運行：
<!DOCTYPE html>
<html>
<head>
<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" id="pageone" >
<div data-role="header" data-position="fixed">
<h1>歡迎訪問我的主頁1</h1>
<a href="#" data-role="submit" data-transition="slide" data-icon="arrow-l">向左</a>
<a href="#pagetwo" data-role="submit" data-icon="arrow-r"data-transition="slide" data-iconpos="right">向右</a>
</div>
<div data-role="content">
<p>點擊鏈接來查看滑動效果。</p>
<div data-role="collapsible">
<h1>要顯示請點擊</h1>
<p>這是顯示出來的內容
</div>
<div data-role="collapsible">
<h1>多層摺疊內容</h1>
<div data-role="collapsible">
<h2>第二層</h2>
<p>這也是點擊顯示的內容</p>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="gear">設置</a></li>
<li><a href="#pagethree" data-icon="plus">通訊錄</a></li>
<li><a href="#" data-icon="grid">菜單</a></li>
<li><a href="#" data-icon="check">喜愛</a></li>
<li><a href="#" data-icon="search">搜索</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>歡迎訪問我的主頁2</h1>
<a href="#pageone" data-role="submit" data-transition="slide" data-icon="arrow-l" data-direction="reverse">向左</a>
<a href="#pagethree" data-role="submit" data-icon="arrow-r"data-transition="slide" data-iconpos="right" >向右</a>
</div>
<div data-role="content">
<!--改變摺疊欄圖標-->
<div data-role="collapsible" data-collapsed="arrow-d" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-mini="true">
<h1>要顯示請點擊</h1>
<p>這是顯示的內容</p>
</div>
<div data-role="collapsible" data-inset="false">
<h1>沒有圓角的摺疊框</h1>
<p>用到的是：data-inset="false"元素</p>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="gear">設置</a></li>
<li><a href="#pagethree" data-icon="plus">通訊錄</a></li>
<li><a href="#" data-icon="grid">菜單</a></li>
<li><a href="#" data-icon="check">喜愛</a></li>
<li><a href="#" data-icon="search">搜索</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="pagethree">
<div data-role="header">
<h1>歡迎訪問我的主頁3</h1>
<a href="#pagetwo" data-role="submit" data-transition="slide" data-icon="arrow-l" data-direction="reverse">向左</a>
<a href="#" data-role="submit" data-icon="arrow-r"data-transition="slide" data-iconpos="right" >向右</a>
</div>
<div data-role="content">
<h2>我的通訊錄</h2>
<ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Albert</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Cameron</a></li>
<li><a href="#">Chloe</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Diana</a></li>
<li><a href="#">Gabriel</a></li>
<li><a href="#">Glen</a></li>
<li><a href="#">Ralph</a></li>
<li><a href="#">Valarie</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="gear">設置</a></li>
<li><a href="#pagethree" data-icon="plus">通訊錄</a></li>
<li><a href="#" data-icon="grid">菜單</a></li>
<li><a href="#" data-icon="check">喜愛</a></li>
<li><a href="#" data-icon="search">搜索</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>