<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>

<div data-role="page" id="pageone">
 <div data-role="header">
  <h1>在此处写入标题</h1>
 </div>
 <div data-role="content">
  <p>在此处写入正文</p>
 </div>
 <div data-role="footer">
  <h1>在此处写入页脚文本</h1>
 </div>
</div>

data-position="fixed" data-fullscreen="true"

<div data-role="footer">
  <h1>标题文字</h1>
</div>

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">转到页面二</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">转到页面一</a>
  </div>
</div>

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo" data-rel="dialog">转到对话框二</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="header">
  <h1>我是一个对话框！</h1>
 </div>
 <div data-role="content">
  <p>对话框与普通页面不同，它显示在当前页面的顶端。它不会横跨整个页面宽度。对话框页眉中的图标 “X” 可关闭对话框。</p>
  <a href="#pageone">转到页面一</a>
 </div>
 <div data-role="footer">
 <h1>页脚文本</h1>
 </div>
</div>

data-transition="slide"

data-direction="reverse"

data-role="button"

data-inline="true"

data-role="controlgroup"
data-type="horizontal/vertical"

<div data-role="controlgroup" data-type="horizontal">
  <p>水平分组：</p>
  <a href="#" data-role="button">按钮 1</a>
  <a href="#" data-role="button">按钮 2</a>
  <a href="#" data-role="button">按钮 3</a>
</div>
<div data-role="controlgroup" data-type="vertical">
  <p>垂直分组（默认）：</p>
  <a href="#" data-role="button">按钮 1</a>
  <a href="#" data-role="button">按钮 2</a>
  <a href="#" data-role="button">按钮 3</a>
</div>

data-rel="back"

data-iconpos="notext"

<div data-role="page">
 <div data-role="header">
  <a href="#" data-role="button" data-icon="home">首页</a>
  <h1>欢迎访问我的主页</h1>
  <a href="#" data-role="button" data-icon="search">搜索</a>
 </div>
</div>

class="ui-btn-right"

<div data-role="footer" class="ui-btn" >
  <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>

data-position="inline"

data-position="fixed"

data-position="fixed"
data-fullscreen="true"

data-role="navbar"

<div data-role="header">
  <h1>标题 可不要</h1>
  <div data-role="navbar">
    <ul>
    <li><a href="#a">首页</a></li>
    <li><a href="#a">导航</a></li>
    <li><a href="#a">搜索</a></li>
  </ul>
  </div>
</div>

class="ui-btn-active"

data-role="collapsible"

<div data-role="collapsible">
  <h1>标题</h1>
  <p>内容</p>
</div>

data-collapsed="false"

<div data-role="collapsible">
 <h1>点击我 - 我可以折叠！</h1>
 <p>我是被展开的内容。</p>
 <div data-role="collapsible">
  <h1>点击我 - 我是嵌套的可折叠块！</h1>
  <p>我是嵌套的可折叠块中被展开的内容。</p>
 </div>
</div>

<div data-role="collapsible-set">
   <div data-role="collapsible">
    <h3>点击我 - 我可以折叠！</h3>
    <p>我是可折叠的内容。</p>
   </div>
   <div data-role="collapsible">
    <h3>点击我 - 我可以折叠！</h3>
    <p>我是可折叠的内容。</p>
   </div>
   <div data-role="collapsible">
    <h3>点击我 - 我可以折叠！</h3>
    <p>我是可折叠的内容。</p>
   </div>
   <div data-role="collapsible">
    <h3>点击我 - 我可以折叠！</h3>
    <p>我是可折叠的内容。</p>
   </div>
</div>

data-inset="false"

data-mini="true"

data-expanded-icon

data-role="listview"

data-role="list-divider"

data-autodividers="true"

data-inset="true"

<ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true" data-filter-placeholder="搜索姓名 ...">
  <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>

<ul data-role="listview" data-inset="true">
   <li>
    <a href="#">
    <img src="/i/chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
    </a>
   </li>
   <li>
    <a href="#">
    <img src="/i/firefox.png">
    <h2>Mozilla Firefox</h2>
    <p>Firefox is a web browser from Mozilla. Released in 2004.</p>
    </a>
   </li>
</ul>

class="ui-li-icon"

<li>
  <a href="#">
   <img src="us.png" alt="USA" class="ui-li-icon">
   USA
  </a>
</li>

<ul data-role="listview">
 <li>
  <a href="#"><img src="chrome.png"></a>
  <a href="#download" data-rel="dialog">下载浏览器</a>
 </li>
</ul>

class="ui-li-count"

<ul data-role="listview">
 <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
 <li><a href="#">Sent<span class="ui-li-count">123</span></a></li>
 <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

data-icon="minus"

<ul data-role="listview" data-inset="true">
   <li data-role="list-divider">星期三, 1 月 2 日, 2013 <span class="ui-li-count">2</span></li>
   <li><a href="#">
    <h2>医生</h2>
    <p><b>To Peter Griffin</b></p>
    <p>Well, Mr. Griffin, I've looked into physical results.</p>
    <p>Ah, Mr. Griffin, I'm not quite sure how to say this. Kim Bassinger? Bass singer? Bassinger?</p>
    <p>But now, onto the cancer</p>
    <p>You are a Cancer, right? You were born in July? Now onto these test results.</p>
    <p class="ui-li-aside">Re: Appointment</p></a>
   </li>
   <li><a href="#">
    <h2>Glen Quagmire</h2>
    <p>Remember me this weekend!</p>
    <br>
    <p>- giggity giggity goo</p>
    <p class="ui-li-aside">Re: Camping</p></a>
   </li>
</ul>