Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
195 lines (169 sloc) 4.26 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Cardview</title>
<script type="text/javascript" src="../../src/cardview.js"></script>
<script type="text/javascript">
var deck;
var data = [
{
img: '../imgs/img1.jpg',
title: 'Card 1',
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
},
{
img: '../imgs/img2.jpg',
title: 'Card 2',
text: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
},
{
img: '../imgs/img3.jpg',
title: 'Card 3',
text: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
},
{
img: '../imgs/img4.jpg',
title: 'Card 4',
text: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
},
{
img: '../imgs/img5.jpg',
title: 'Card 5',
text: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.'
}
];
function loaded () {
deck = new CardView('#wrapper', {
dataset: data,
onUpdateContent: function (el, data) {
el.querySelector('img').src = data.img;
el.querySelector('h3').innerHTML = data.title;
el.querySelector('p').innerHTML = data.text;
}
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, html {
height: 100%;
}
body, ul, li, h1, h2, h3, img, p {
padding: 0;
margin: 0;
border: 0;
list-style: none;
}
body {
/* On modern browsers, prevent the whole page to bounce */
overflow: hidden;
background-color: #aaa;
font-size: 12px;
}
#wrapper {
position: absolute;
z-index: 1;
width: 100%;
max-width: 568px;
height: 100%;
max-height: 568px;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
/* Prevent native touch events on Windows */
-ms-touch-action: none;
/* Prevent the callout on tap-hold and text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Prevent elements to be highlighted on tap */
-webkit-tap-highlight-color: rgba(0,0,0,0);
/* Prevent text resize on orientation change, useful for web-apps */
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#deck {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
background: #ccc;
}
.card {
position: absolute;
width: 100%;
height: 100%;
padding: 10px;
z-index: 10;
/* Put the scroller into the HW Compositing layer right from the start */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.card div {
position: relative;
width: 100%;
height: 100%;
border: 2px solid #aaa;
padding: 20px;
border-radius: 10px;
background: #fff;
background-position: 50% 50%;
background-size: 95% 95%;
background-repeat: no-repeat;
font-size: 1.6em;
}
.card img {
float: left;
margin: 0 10px 10px 0;
border: 1px solid #000;
}
.card h3 {
background-color: #aaa;
padding: 8px;
margin-bottom: 10px;
text-align: center;
}
</style>
</head>
<body onload="loaded()">
<div id="wrapper">
<ul id="deck">
<li class="card"><div>
<h3>Title</h3>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12P4//8/AAX+Av7czFnn
AAAAAElFTkSuQmCC" alt="thumb" width="125" height="125">
<p>Text</p>
</div></li>
<li class="card"><div>
<h3>Title</h3>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12P4//8/AAX+Av7czFnn
AAAAAElFTkSuQmCC" alt="thumb" width="125" height="125">
<p>Text</p>
</div></li>
<li class="card"><div>
<h3>Title</h3>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12P4//8/AAX+Av7czFnn
AAAAAElFTkSuQmCC" alt="thumb" width="125" height="125">
<p>Text</p>
</div></li>
</ul>
</div>
</body>
</html>