Hi,
<!doctype html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Flickable.js / Demo 2</title>
<!-- Mobile viewport optimization -->
<meta name="viewport" content="width=900" />
<!-- Shared Scripts -->
<script src="../libs/modernizr-2.0.6.min.js"></script>
<script src="../libs/zepto.min.js"></script>
<script src="../src/zepto.flickable.min.js"></script>
<script src="js/demo.js"></script>
<!-- Demo 1 Scripts -->
<script type="text/javascript">
$(document).ready(function()
{
$('#demo2').flickable({segments:4});
$('#demo2 a').tap(function(){ alert('You just tapped "'+$(this).text()+'"'); });
if(!Modernizr.touch) {
// If you're on a desktop, show next/prev links for mouse navigation
$('#demo2-intro').append('<p><a class="prev">Prev</a> | <a class="next">Next</a></p>');
$('.next').click(function() { $('#demo2').flickable('scrollNext');});
$('.prev').click(function() { $('#demo2').flickable('scrollPrev');});
// Add mouse support
$('#demo2 a').click(function(){ alert('You just clicked "'+$(this).text()+'"'); });
}
});
</script>
<!-- Shared Styles -->
<link rel="stylesheet" href="css/demo.css">
<!-- Demo 1 Styles -->
<style type="text/css">
#demo2-wrapper
{
width: 800px;
height: 200px;
margin: 0 auto;
background: #DDDDDD;
overflow: hidden;
}
#demo2
{
width: 3200px;
height: 200px;
}
#demo2 li
{
display: block;
float: left;
width: 200px;
height: 200px;
}
#demo2 li a
{
color: blue;
display: block;
height: 160px;
line-height: 160px;
text-align: center;
margin: 20px;
background: #fff;
-webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .2);
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .2);
}
a{
text-decoration: none;
color: inherit;
}
.openme {
display: inline-block;
color: #fff;
background-color: #333;
margin-top: 100px;
padding: 10px;
border: solid 1px #000;
border-radius: 3px;
cursor: pointer;
}
#menu{
opacity: 0;
visibility: hidden;
position: absolute;
padding:0px;
border: solid 1px #000;
border-radius: 3px;
background: -webkit-linear-gradient(top, #444 45%, #333 55%);
background: -moz-linear-gradient(top, #444 45%, #333 55%);
}
#menu.show {
opacity: 1;
visibility: visible;
}
#menu a{
float:left;
margin: 7px;
padding: 10px 20px;
font-weight: bold;
font-size: 20px;
text-align: center;
border-radius: 5px;
background-image: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#fff), to(#edeff3));
background-image: -moz-linear-gradient(top, #fff, #edeff3);
}
#arrow {
position: absolute;
bottom: -40px;
/* Create the arrow using borders */
border-style: solid;
border-width: 20px;
border-color: transparent;
border-top-color: #333;
}
</style>
</head>
<body>
<div id="wrapper">
<section>
<div class="demo-intro" id="demo2-intro">
<h1>Demo 2: Thumbnail Slider</h1>
<p>This is similar to the way the App Store allows you to flip through app screenshots, but it can also be used to allow users to slide through navigation items that don’t fit within a single page. </p>
</div>
<a class="openme">Find ATM Locations</a>
<!-- Demo 2 HTML -->
<div id="demo2-wrapper" class="clearfix">
<li><a>Tap Me 10</a></li>
<li><a>Tap Me 11</a></li>
<li><a>Tap Me 12</a></li>
<li><a>Tap Me 13</a></li>
<li><a>Tap Me 14</a></li>
<li><a>Tap Me 15</a></li>
<li><a>Tap Me 16</a></li>
</ul>
</div>
</div>
</section>
</div>
</body>
<script src="http://zeptojs.com/zepto.min.js"></script>
<script type="text/javascript">
var $menu = $('#menu');
var $arrow = $('#arrow');
var $openme = $('.openme');
// Click "Open Me" button to show the menu
$openme.bind('click', function() {
// Position menu to where button is
$menu.css({
// Position menu above button
top: $openme[0].offsetTop - $menu.height() - parseFloat($arrow.css('border-top-width')),
left: $openme[0].offsetLeft
});
// Position arrow correctly
$arrow.css({
left: $openme[0].offsetLeft+$openme.width()-parseFloat($arrow.css('border-top-width'))*2
});
// Toggle menu's opacity
$menu.toggleClass('show');
})
</script>
</html>