基于jQuery-Mobile对话框实现的简单相册

最新推荐文章于 2020-10-30 20:39:13 发布

原创最新推荐文章于 2020-10-30 20:39:13 发布 · 398 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#基于jQuery-Mobile对话框实现的简单相册 #jQuery-mobile对话框 #jQuery-mobile实现简单相册

jQuery学习专栏收录该内容

16 篇文章

订阅专栏

本文介绍了使用jQuery-Mobile创建对话框式相册的两种方法。第一种方法通过手动编写HTML和CSS，设置每个图片链接和弹出窗口。第二种方法利用JavaScript循环，从图片数组中动态生成链接和弹出窗口，简化了开发过程。

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

博主在这里介绍两种方法,

一、第一种方法（与网上的大部分相似，较为麻烦）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/jquery.mobile-1.4.5.min.css"/>
    <script src="../js/jquery.min.js"></script>
	<script src="../js/jquery.mobile-1.4.5.min.js" ></script>
	</head>
	<body>
		<div data-role="page">
		<!-- data-rel="popup"——设置当前元素具有弹出窗的功能；
		data-role="popup"——设置当前元素为弹出窗；-->
			<a href="#popup1_1" data-rel="popup" data_position-to="window">
				<img src="../img/a1.jpg" style="width:49%"></img>
				</a>
			<a href="#popup1_2" data-rel="popup" data_position-to="window">
				<img src="../img/a2.jpg" style="width:49%"></img>
				</a>
			<a href="#popup1_3" data-rel="popup" data_position-to="window">
				<img src="../img/a3.jpg" style="width:49%"></img>
				</a>
			<a href="#popup1_4" data-rel="popup" data_position-to="window">
				<img src="../img/a4.jpg" style="width:49%"></img>
				</a>
			<a href="#popup1_5" data-rel="popup" data_position-to="window">
				<img src="../img/a5.jpg" style="width:49%"></img>
				</a>
			<a href="#popup1_1" data-rel="popup" data_position-to="window">
				<img src="../img/a6.jpg" style="width:49%"></img>
				</a>
				
				<div data-role="popup" id="popup1">
					<a href="#" data-rel="back" data-role="button" data-icon="delete"
						data-iconpos="notetext" class="ui-btn-right">Close</a>
						<img src="../img/a1.jpg" style="max-height: 500px;">
				</div>
				<div data-role="popup" id="popup2">
					<a href="#" data-rel="back" data-role="button" data-icon="delete"
						data-iconpos="notetext" class="ui-btn-right">Close</a>
						<img src="../img/a2.jpg" style="max-height: 500px;">
				</div>
				<div data-role="popup" id="popup3">
					<a href="#" data-rel="back" data-role="button" data-icon="delete"
						data-iconpos="notetext" class="ui-btn-right">Close</a>
						<img src="../img/a3.jpg" style="max-height: 500px;">
				</div>
				<div data-role="popup" id="popup4">
					<a href="#" data-rel="back" data-role="button" data-icon="delete"
						data-iconpos="notetext" class="ui-btn-right">Close</a>
						<img src="../img/a4.jpg" style="max-height: 500px;">
				</div>
				<div data-role="popup" id="popup5">
					<a href="#" data-rel="back" data-role="button" data-icon="delete"
						data-iconpos="notetext" class="ui-btn-right">Close</a>
						<img src="../img/a5.jpg" style="max-height: 500px;">
				</div>
				<div data-role="popup" id="popup6">
					<a href="#" data-rel="back" data-role="button" data-icon="delete"
						data-iconpos="notetext" class="ui-btn-right">Close</a>
						<img src="../img/a6.jpg" style="max-height: 500px;">
				</div>
		</div>
	</body>
</html>

二、第二种方法（将图片或图片地址放进一个数组，循环）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" type="text/css" 
    			href="../css/jquery.mobile-1.4.5.min.css">
    	<script src="../js/jquery.min.js"></script>
		<script src="../js/jquery.mobile-1.4.5.min.js" ></script>
		<style>
			.ui-btn {
				display:inline-block;
			}
		</style>
	</head>
	<body>
		<div data-role="page" > 
			
		</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>"
					
					//var x= '<img src="../img/' + imgList[index] + '" alt="图片不能正常显示">'; 
					//var y= "<img src='../img/"+ imgList[index] + "' alt='图片不能正常显示'>";
					
					$("[data-role='page']").append(linkx);
					$("[data-role='page']").append(popupx);
				}

		</script>
	</body>
</html>