HTML5与JQuery.Mobile（四）

最新推荐文章于 2019-05-10 09:36:32 发布

Soloman

最新推荐文章于 2019-05-10 09:36:32 发布

阅读量2.7k

点赞数

分类专栏： HTML5/CSS/JavaScript

HTML5/CSS/JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

这次我们来看看JQuery Mobile编写的图片特效效果：

我们去http://www.photoswipe.com/这个网站（我这里不清楚什么原因没能看到效果，只好去github下载了代码回来自己看https://github.com/codecomputerlove/PhotoSwipe）

我们能够通过下载的代码/example/04-jquery-mobile.html看到一个image gallery的效果，以下将对代码进行分析。

<!DOCTYPE html>
<html>
<head>
	<title>PhotoSwipe</title>
	<meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" />
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	
	<link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" />
	<link href="jquery-mobile.css" type="text/css" rel="stylesheet" />
	<link href="../photoswipe.css" type="text/css" rel="stylesheet" />
	
	<script type="text/javascript" src="../lib/klass.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
	<script type="text/javascript" src="../code.photoswipe.jquery-3.0.5.min.js"></script>
	
	
	<script type="text/javascript">
		
		/*
		 * IMPORTANT!!!
		 * REMEMBER TO ADD  rel="external"  to your anchor tags. 
		 * If you don't this will mess with how jQuery Mobile works
		 */
		
		(function(window, $, PhotoSwipe){
			
			$(document).ready(function(){
				// 针对class为gallery-page的页面的pageshow事件显示幻灯片效果
				$('div.gallery-page')
					.live('pageshow', function(e){
						
						var 
							currentPage = $(e.target),
							options = {},
							photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));
							
						return true;
						
					})
					
					.live('pagehide', function(e){
						
						var 
							currentPage = $(e.target),
							photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

						if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
							PhotoSwipe.detatch(photoSwipeInstance);
						}
						
						return true;
						
					});
				
			});
		
		}(window, window.jQuery, window.Code.PhotoSwipe));
		
	</script>
	
</head>
<body>

<!-- 第一个页面，展示一个列表，可通过点击列表项切换到相册页面 -->
<div data-role="page" id="Home">

	<div data-role="header">
		<h1>PhotoSwipe</h1>
	</div>
	
	
	<div data-role="content" >	
		
		<p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>		
		
		<ul data-role="listview" data-inset="true">
        <!-- 切换到Gallery1页面 -->
			<li><a href="#Gallery1">First Gallery</a></li> 
        <!-- 切换到Gallery2页面 -->
			<li><a href="#Gallery2">Second Gallery</a></li> 
		</ul> 
		
		<p>PhotoSwipe has also been designed to run stand-alone and can be easily integrated into your non jQuery / jQuery mobile websites:</p>
		
		<ul data-role="listview" data-inset="true">
			<li><a href="01-default.html" target="_blank">Code Computerlove</a></li> 
		</ul> 
		
	</div>

	<div data-role="footer">
		<h4>© 2012 Code Computerlove</h4>
	</div>

</div>

<!-- Gallery1页面 -->
<div data-role="page" data-add-back-btn="true" id="Gallery1" class="gallery-page">

	<div data-role="header">
		<h1>First Gallery</h1>
	</div>

	<div data-role="content">	
		
		<ul class="gallery">
		<!-- rel=external 表示该链接是一个标签 -->
			<li><a href="images/full/001.jpg" rel="external"><img src="images/thumb/001.jpg" alt="Image 001" /></a></li>
			<li><a href="images/full/002.jpg" rel="external"><img src="images/thumb/002.jpg" alt="Image 002" /></a></li>
			<li><a href="images/full/003.jpg" rel="external"><img src="images/thumb/003.jpg" alt="Image 003" /></a></li>
			<li><a href="images/full/004.jpg" rel="external"><img src="images/thumb/004.jpg" alt="Image 004" /></a></li>
			<li><a href="images/full/005.jpg" rel="external"><img src="images/thumb/005.jpg" alt="Image 005" /></a></li>
			<li><a href="images/full/006.jpg" rel="external"><img src="images/thumb/006.jpg" alt="Image 006" /></a></li>
			<li><a href="images/full/007.jpg" rel="external"><img src="images/thumb/007.jpg" alt="Image 007" /></a></li>
			<li><a href="images/full/008.jpg" rel="external"><img src="images/thumb/008.jpg" alt="Image 008" /></a></li>
			<li><a href="images/full/009.jpg" rel="external"><img src="images/thumb/009.jpg" alt="Image 009" /></a></li>
			
		</ul>
		
	</div>
	
	<div data-role="footer">
		<h4>© 2012 Code Computerlove</h4>
	</div>
	
</div>


<!-- Gallery2页面 -->
<div data-role="page" data-add-back-btn="true" id="Gallery2" class="gallery-page">

	<div data-role="header">
		<h1>Second Gallery</h1>
	</div>

	<div data-role="content">	
		
		<ul class="gallery">
		
			<li><a href="images/full/010.jpg" rel="external"><img src="images/thumb/010.jpg" alt="Image 010" /></a></li>
			<li><a href="images/full/011.jpg" rel="external"><img src="images/thumb/011.jpg" alt="Image 011" /></a></li>
			<li><a href="images/full/012.jpg" rel="external"><img src="images/thumb/012.jpg" alt="Image 012" /></a></li>
			<li><a href="images/full/013.jpg" rel="external"><img src="images/thumb/013.jpg" alt="Image 013" /></a></li>
			<li><a href="images/full/014.jpg" rel="external"><img src="images/thumb/014.jpg" alt="Image 014" /></a></li>
			<li><a href="images/full/015.jpg" rel="external"><img src="images/thumb/015.jpg" alt="Image 015" /></a></li>
			<li><a href="images/full/016.jpg" rel="external"><img src="images/thumb/016.jpg" alt="Image 016" /></a></li>
			<li><a href="images/full/017.jpg" rel="external"><img src="images/thumb/017.jpg" alt="Image 017" /></a></li>
			<li><a href="images/full/018.jpg" rel="external"><img src="images/thumb/018.jpg" alt="Image 018" /></a></li>
		
		</ul>
		
	</div>

	<div data-role="footer">
		<h4>© 2012 Code Computerlove</h4>
	</div>

</div>

</body>
</html>