1.动态添加checkbox

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
			<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<title></title>
	</head>
	<body>
		<div data-role="page">
			<div data-role="header">
				
			</div>
		<div data-role="content">
		​<div id="aaa">
    		 <button id="btt">添加checkbox</button>
    	</div>
		</div>
		</div>
	</body>
	<script> $(function(){ var i=0; $("#btt").on("click",function(){ var aa = "<input type='checkbox' id='pp" + i + "'/><label for='pp" + i + "'>游戏</label>"; $("#aaa").append(aa); $("#pp" + i).checkboxradio();//渲染样式，js动态的 i++; }) }) </script>
</html>

2.页面之间的跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<title></title>
	</head>
	<body>
		<div data-role="page">
			<a href="#pagetwo" class="ui-btn">
				第二页
			</a>
		</div>
		<div data-role="page" id="pagetwo">
			<a href="#" data-rel="back" class="ui-btn">
				返回第一个界面
			</a>
		</div>
	</body>
</html>

3.popup弹出框，静态与动态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
	<style> .ui-btn { display:inline-block; } </style>
	</head>
	<body>
		<div data-role="page" > 
			
  <div data-role="content">
    <a class="ui-btn" href="#mypupop" data-rel="popup">
    	简单的弹出框
    </a>
    <div id="mypupop" data-role="popup">
    <img src="img/2.jpg" style="max-height:512px;">
    </div>
  </div>

		</div>
		<script> var imgList = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"]; var index =0; for (index=0;index < imgList.length;index++) { var linkx="<a href='#pop"+ index+"' data-rel='popup'" + "data-role='button' data-position-to='window' style='width:40%;' >" + "<img src='"+ imgList[index] +"' style='width:75%;max-height:70px;' >" + "</a>"; var popupx="<div data-role='popup' id='pop"+ index +"'>" + " <a href='#' data-rel='back' data-role='button' data-icon='delete' " + " data-icon='delete' data-iconpos='notext' class='ui-btn-right'>close</a> " + " <img src='"+ imgList[index] +"' style='max-height:512px;'>" +"</div>" $("[data-role='page']").append(linkx); $("[data-role='page']").append(popupx); } </script>
	</body>
</html>

4.列表listview

<body>
		<div data-role="page">
			<div data-role = "header">
			<h1>水果</h1>
			</div>
			<div data-role = "content">
				<ul data-role="listview">
					<li>
						<a href="#"><img src="img/u=1771744503,3274790315&fm=27&gp=0.jpg">
							<P>名称</P>
							<P>简介</P>
						</a>
					</li>
					<li>
						<a href="#"><img src="img/u=1771744503,3274790315&fm=27&gp=0.jpg">
							<P>名称</P>
							<P>简介</P>
						</a>
					</li>
					<li>
						<a href="#"><img src="img/u=1771744503,3274790315&fm=27&gp=0.jpg">
							<P>名称</P>
							<P>简介</P>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</body>