案例：jquery Mobile案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<link rel="stylesheet" href="/js/jquery.mobile-1.3.2.min.css">
5
<script src="/js/jquery-1.8.3.min.js"></script>
6
<script src="/js/jquery.mobile-1.3.2.min.js"></script>
7
</head>
8
<body>
9
​
10
<div data-role="page" id="pageone">
11
  <div data-role="content">
12
    <h2>划分按钮实例</h2>
13
    <ul data-role="listview" data-inset="true" data-split-theme="e">
14
      <li data-role="divider" data-theme="a">浏览器</li>
15
      <li>
16
        <a href="#">
17
        <img src="/img/chrome.png">
18
        <h2>Google Chrome</h2>
19
        <p>Google Chrome 是一款免费的开源浏览器。发布于 2008 年。</p>
20
        </a>
21
        <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a>
22
      </li>
23
      <li>
24
        <a href="#">
25
        <img src="/img/firefox.png">
26
        <h2>Mozilla Firefox</h2>
27
        <p>Firefox 是一款来自 Mozilla。发布于 2004 年。</p>
28
        </a>
29
        <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a>
30
      </li>
31
    </ul>
32
  </div>
33
</div>
34
​
35
<div data-role="page" id="download" data-overlay-theme="e">
36
  <div data-role="content">
37
  <h3>划分按钮实例</h3>
38
    <p>下面的按钮仅供演示。</p>
39
    <a href="#" data-role="button" data-rel="back" data-theme="b" data-icon="check" data-inline="true" data-mini="true">下载</a>
40
    <a href="#" data-role="button" data-rel="back" data-inline="true" data-mini="true">取消</a>
41
  </div>
42
</div>
43
​
44
</body>
45
</html>
46
​