Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-07 08:00:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixed up the demo so it works with our current events anyway

Browse source
This commit is contained in:
scottjehl 2010-10-26 09:26:22 -04:00
parent a71c7a936a
commit d8c574dc0e
8 changed files with 63 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
experiments/photos/_photo2.html
View file

@ -4,29 +4,27 @@
<title>jQuery Mobile Framework - Photo 1</title>
<link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
<link rel="stylesheet" href="photos.css" />
<script type="text/javascript" src="photos.js"></script>
</head>
<body>
<div data-role="page" data-fullscreen="true">
<link rel="stylesheet" href="photos.css" />
<script type="text/javascript" src="photos.js"></script>
<div data-role="page" data-fullscreen="true" class="photoview">
<div data-role="header" id="">
<h1>A canoe</h1>
</div>
<div data-role="content" class="photoview">
<div data-role="content" >
<a href="_photo3.html">
<img src="images/photo-canoe.jpeg" alt="photo-canoe" />
</a>
<img src="images/photo-canoe.jpeg" alt="photo-canoe" />
</div>
<div class="ui-footer ui-bar-a">
<a href="_photo1.html">Prev</a>
<a href="_photo3.html">Next</a>
<a href="index.html" class="prev">Prev</a>
<a href="_photo3.html" class="next">Next</a>
</div>

16
experiments/photos/_photo3.html
View file

@ -4,29 +4,27 @@
<title>jQuery Mobile Framework - Photo 1</title>
<link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
<link rel="stylesheet" href="photos.css" />
<script type="text/javascript" src="photos.js"></script>
</head>
<body>
<div data-role="page" data-fullscreen="true">
<link rel="stylesheet" href="photos.css" />
<script type="text/javascript" src="photos.js"></script>
<div data-role="page" data-fullscreen="true" class="photoview">
<div data-role="header" id="photoview">
<h1>A dock</h1>
</div>
<div data-role="content" class="photoview">
<div data-role="content" >
<a href="_photo4.html">
<img src="images/photo-dock.jpeg" alt="photo-dock" />
</a>
<img src="images/photo-dock.jpeg" alt="photo-dock" />
</div>
<div class="ui-footer ui-bar-a">
<a href="_photo2.html">Prev</a>
<a href="_photo4.html">Next</a>
<a href="_photo2.html" class="prev">Prev</a>
<a href="_photo4.html" class="next">Next</a>
</div>

16
experiments/photos/_photo4.html
View file

@ -4,29 +4,27 @@
<title>jQuery Mobile Framework - Photo 1</title>
<link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
<link rel="stylesheet" href="photos.css" />
<script type="text/javascript" src="photos.js"></script>
</head>
<body>
<div data-role="page" data-fullscreen="true">
<link rel="stylesheet" href="photos.css" />
<script type="text/javascript" src="photos.js"></script>
<div data-role="page" data-fullscreen="true" class="photoview">
<div data-role="header">
<h1>A kayak</h1>
</div>
<div data-role="content" class="photoview">
<div data-role="content" >
<a href="_photo5.html">
<img src="images/photo-kayak.jpeg" alt="photo-kayak" />
</a>
<img src="images/photo-kayak.jpeg" alt="photo-kayak" />
</div>
<div class="ui-footer ui-bar-a">
<a href="_photo3.html">Prev</a>
<a href="_photo5.html">Next</a>
<a href="_photo3.html" class="prev">Prev</a>
<a href="_photo5.html" class="next">Next</a>
</div>

16
experiments/photos/_photo5.html
View file

@ -4,28 +4,26 @@
<title>jQuery Mobile Framework - Photo 1</title>
<link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
<link rel="stylesheet" href="photos.css" />
<script type="text/javascript" src="photos.js"></script>
</head>
<body>
<div data-role="page" data-fullscreen="true">
<link rel="stylesheet" href="photos.css" />
<script type="text/javascript" src="photos.js"></script>
<div data-role="page" data-fullscreen="true" class="photoview">
<div data-role="header">
<h1>Nathan running</h1>
</div>
<div data-role="content" class="photoview">
<div data-role="content" >
<a href="_photo6.html">
<img src="images/photo-run.jpeg" alt="photo-run" />
</a>
<img src="images/photo-run.jpeg" alt="photo-run" />
</div>
<div class="ui-footer ui-bar-a">
<a href="_photo4.html">Prev</a>
<a href="_photo6.html">Next</a>
<a href="_photo4.html" class="prev">Prev</a>
<a href="_photo6.html" class="next">Next</a>
</div>

15
experiments/photos/_photo6.html
View file

@ -4,27 +4,26 @@
<title>jQuery Mobile Framework - Photo 1</title>
<link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
<link rel="stylesheet" href="photos.css" />
<script type="text/javascript" src="photos.js"></script>
</head>
<body>
<div data-role="page" data-fullscreen="true">
<link rel="stylesheet" href="photos.css" />
<script type="text/javascript" src="photos.js"></script>
<div data-role="page" data-fullscreen="true" class="photoview">
<div data-role="header">
<h1>Sandy beach</h1>
</div>
<div data-role="content" class="photoview">
<div data-role="content" >
<a href="_photo7.html">
<img src="images/photo-sand.jpeg" alt="photo-sand" />
</a>
<img src="images/photo-sand.jpeg" alt="photo-sand" />
</div>
<div class="ui-footer ui-bar-a">
<a href="_photo5.html">Prev</a>
<a href="_photo5.html" class="prev">Prev</a>
<a href="index.html" class="next">First</a>
</div>

14
experiments/photos/_photo1.html → experiments/photos/index.html
View file

@ -4,28 +4,26 @@
<title>jQuery Mobile Framework - Photo 1</title>
<link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
<link rel="stylesheet" href="photos.css" />
<script type="text/javascript" src="photos.js"></script>
</head>
<body>
<div data-role="page" data-fullscreen="true">
<link rel="stylesheet" href="photos.css" />
<script type="text/javascript" src="photos.js"></script>
<div data-role="page" data-fullscreen="true" class="photoview">
<div data-role="header">
<h1>A bridge</h1>
</div>
<div data-role="content" class="photoview">
<div data-role="content" >
<a href="_photo2.html">
<img src="images/photo-bridge.jpeg" alt="photo-bridge" />
</a>
<img src="images/photo-bridge.jpeg" alt="photo-bridge" />
</div>
<div data-role="footer">
<a href="_photo2.html">Next</a>
<a href="_photo2.html" class="next">Next</a>
</div>

3
experiments/photos/photos.css
View file

@ -1 +1,2 @@
#photoview img { width: 100%; }
.photoview .ui-content { padding: 0; }
.photoview img { width: 100%; }

42
experiments/photos/photos.js
View file

@ -1,23 +1,21 @@
$(function(){
$('.photoview')
.live('swipeleft',function(){
$(this).find('a').ajaxClick();
})
.live('swiperight',function(){
$(this).next().find('a:contains(Prev)').ajaxClick();
});
$('.photoview a').click(function(){
event.stopImmediatePropagation();
})
.tap(function(event){
$(this).ajaxClick();
event.stopImmediatePropagation();
})
.taphold(function(event){
$.fixedToolbars.toggle();
event.stopImmediatePropagation();
})
}
});
$('.photoview')
.live('pagebeforehide',function(){
$.fixedToolbars.hide(true);
})
.live('pageshow',function(){
$.fixedToolbars.show();
})
.live('swipeleft',function(){
$(this).find('a.next').click();
})
.live('swiperight',function(){
$(this).next().find('a.prev').click();
});
$('.photoview img').live('mousedown touchstart',function(event){
event.preventDefault();
})