内容格式布局 <div class="ui-grid-b"> 三列 <div class="ui-block-a">
HTML5
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<link rel="stylesheet" href="jquery.mobile-1.3.1.css">
<script type="text/javascript" charset="utf-8" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<header data-role="header">
<a href="#" data-role="button" data-icon="back">后退</a>
<h1>9宫格</h1>
<a href="#" data-role="button" data-icon="forward">前进</a>
</header>
<div class="ui-grid-b">
<div class="ui-block-a"><a href="#" data-theme="a" data-role="button" data-icon="home" data-icopos="top">首页</a></div>
<div class="ui-block-b"><a href="#" data-theme="b" data-role="button" data-icon="home" data-icopos="top">列表</a></div>
<div class="ui-block-c"><a href="#" data-theme="c" data-role="button" data-icon="home" data-icopos="top">嘉兴</a></div>
<div class="ui-block-a"><a href="#" data-theme="a" data-role="button" data-icon="home" data-icopos="top">信息</a></div>
<div class="ui-block-b"><a href="#" data-theme="b" data-role="button" data-icon="home" data-icopos="top">搜索</a></div>
<div class="ui-block-c"><a href="#" data-theme="c" data-role="button" data-icon="home" data-icopos="top">设置</a></div>
<div class="ui-block-a"><a href="#" data-theme="a" data-role="button" data-icon="home" data-icopos="top">已选</a></div>
<div class="ui-block-b"><a href="#" data-theme="b" data-role="button" data-icon="home" data-icopos="top">提示</a></div>
<div class="ui-block-c"><a href="#" data-theme="c" data-role="button" data-icon="home" data-icopos="top">添加</a></div>
</div>
</body>
</html>
折叠块内容data-role="collapsible"
<div data-role="collapsible-set"><section data-role="collapsible">
<h3>可折叠的区标题</h3>
<p>这是一个可折叠内容,默认开启,点击关闭</p>
</section>
</div>
HTML5
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<link rel="stylesheet" href="jquery.mobile-1.3.1.css">
<script type="text/javascript" charset="utf-8" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div data-role="collapsible-set">
<section data-role="collapsible">
<h3>可折叠的区标题</h3>
<p>这是一个可折叠内容,默认开启,点击关闭</p>
</section>
<section data-role="collapsible">
<h3>可折叠的区标题</h3>
<p>这是一个可折叠内容,默认开启,点击关闭</p>
</section>
<section data-role="collapsible">
<h3>可折叠的区标题</h3>
<p>这是一个可折叠内容,默认开启,点击关闭</p>
</section>
<section data-role="collapsible">
<h3>可折叠的区标题</h3>
<p>这是一个可折叠内容,默认开启,点击关闭</p>
</section>
</div>
</body>
</html>