207 lines
6.8 KiB
HTML
207 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Sliding View Sample</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
|
|
<script src="../../../src/libs/jquery-1.7.1.js"></script>
|
|
<script src="../../../src/libs/jquery.animate-enhanced.js"></script>
|
|
|
|
<link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" />
|
|
<script src="../../../src/slidingview/slidingview.js"></script>
|
|
<script type="text/javascript" src="swipeview.js"></script>
|
|
|
|
<style>
|
|
|
|
|
|
|
|
body {
|
|
padding:0;
|
|
margin:0;
|
|
background:#fff;
|
|
-webkit-user-select:none;
|
|
-webkit-text-size-adjust:none;
|
|
color:#333;
|
|
font-family:helvetica;
|
|
font-size:12px;
|
|
text-align:center;
|
|
}
|
|
|
|
h1 {
|
|
font-size:2em;
|
|
padding:20px 0;
|
|
margin:0;
|
|
}
|
|
|
|
#swipeview {
|
|
width:100%;
|
|
min-width:320px;
|
|
height:150px;
|
|
background:#ddd;
|
|
border-top:1px solid #aaa;
|
|
border-bottom:1px solid #aaa;
|
|
}
|
|
|
|
#nav {
|
|
position:absolute;
|
|
z-index:100;
|
|
top:8px;
|
|
width:200px;
|
|
height:20px;
|
|
left:50%;
|
|
background:rgba(0,0,0,0.75);
|
|
padding:0;
|
|
margin:0 0 0 -100px;
|
|
-webkit-border-radius:10px;
|
|
}
|
|
|
|
#nav li {
|
|
display:block;
|
|
float:left;
|
|
width:14px;
|
|
height:14px; line-height:14px;
|
|
-webkit-border-radius:7px;
|
|
background:rgba(255,255,255,0.1);
|
|
overflow:hidden;
|
|
padding:0;
|
|
margin:3px 11px 0 0;
|
|
text-align:center;
|
|
}
|
|
|
|
#nav li#prev {
|
|
margin-left:5px;
|
|
background:transparent;
|
|
}
|
|
|
|
#nav li#next {
|
|
margin-right:0;
|
|
background:transparent;
|
|
}
|
|
|
|
#nav li.selected {
|
|
background:rgba(255,255,255,0.4);
|
|
}
|
|
|
|
#swipeview-slider > div {
|
|
position:relative;
|
|
display:-webkit-box;
|
|
-webkit-box-orient:vertical;
|
|
-webkit-box-pack:center;
|
|
-webkit-box-align:center;
|
|
overflow:hidden;
|
|
}
|
|
|
|
#swipeview-slider span {
|
|
-webkit-box-sizing:border-box;
|
|
display:block;
|
|
text-align:center;
|
|
font-size:1.4em;
|
|
padding:0 20px;
|
|
}
|
|
|
|
p {
|
|
padding:20px;
|
|
margin:0;
|
|
font-size:1.4em;
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
$(document).ready( function() {
|
|
|
|
//Setup the ViewNavigator
|
|
new SlidingView( 'sidebar', 'body' );
|
|
|
|
var carousel,
|
|
el,
|
|
i,
|
|
page,
|
|
slides = [
|
|
'<strong>Swipe</strong> to know more >>><br>Or scroll down for <em>Lorem Ipsum</em>',
|
|
'1. A robot may not injure a human being or, through inaction, allow a human being to come to harm.',
|
|
'2. A robot must obey the orders given to it by human beings, except where such orders would conflict with the First Law.',
|
|
'3. A robot must protect its own existence as long as such protection does not conflict with the First or Second Laws.'
|
|
];
|
|
|
|
var target = $('#swipeview').get()[0];
|
|
carousel = new SwipeView( target, {
|
|
numberOfPages: slides.length,
|
|
hastyPageFlip: true
|
|
});
|
|
|
|
// Load initial data
|
|
for (i=0; i<3; i++) {
|
|
page = i==0 ? slides.length-1 : i-1;
|
|
|
|
el = document.createElement('span');
|
|
el.innerHTML = slides[page];
|
|
carousel.masterPages[i].appendChild(el)
|
|
}
|
|
|
|
carousel.onFlip(function () {
|
|
var el,
|
|
upcoming,
|
|
i;
|
|
|
|
for (i=0; i<3; i++) {
|
|
upcoming = carousel.masterPages[i].dataset.upcomingPageIndex;
|
|
|
|
if (upcoming != carousel.masterPages[i].dataset.pageIndex) {
|
|
el = carousel.masterPages[i].querySelector('span');
|
|
el.innerHTML = slides[upcoming];
|
|
}
|
|
}
|
|
});
|
|
|
|
} );
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style>
|
|
#sidebar {
|
|
background-color: red;
|
|
padding:10px;
|
|
}
|
|
#body {
|
|
background-color: white;
|
|
padding:10px;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="slidingview_wrapper">
|
|
<div id="sidebar">sidebar here!</div>
|
|
<div id="body">
|
|
<h1>Three Laws of Robotics</h1>
|
|
<div id="swipeview"></div>
|
|
|
|
<p>The Three Laws of Robotics (often shortened to The Three Laws or Three Laws) are a set of rules devised by the science fiction author Isaac Asimov and later added to. The rules are introduced in his 1942 short story "Runaround", although they were foreshadowed in a few earlier stories.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|