JqueryMobile试题

最新推荐文章于 2021-11-01 21:18:04 发布

原创最新推荐文章于 2021-11-01 21:18:04 发布 · 792 阅读

0 ·

CC 4.0 BY-SA版权

JqueryMobile 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何在移动端使用jQuery Mobile动态添加checkbox，实现页面间的跳转，创建弹出框，以及构建列表视图。通过具体代码实例，展示了动态元素与用户交互的设计技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>